How do I Position an Element within Heading (H1, H2, etc) tags?

Question

This seems like it should be something easy, yet it is driving me mad!!

I need to be able to position a button, or other input element for that matter to the right of a header element, which also contains text.

The basic markup is:

<h3>Order Details  <input type="button" value="Refund" id="btnRefund"  /></h3>

The desired result is that the text "Order Details" is at the left of the H3 Element and the button is at the right. The obvious solution is to add align:right to the button, however this causes the button to appear outside the H3 element or not inline with the text.

I've tried various combination of the position property on the H3 element and wrapping the text in div and span tags.

I'm sure I kick myself when I get the solution to this.

Edit/Update: I am sticking with nickf's answer (for now anyway) as I'm dealing with quite an old system with the H3 already styled in the external style sheet including background colour etc. There are also many instances of the H3 tag being used without any further elements nested in it and to me it does not make sense to have a div tag replicating the style of the H3 tag to accomodate this.

If I were starting from scratch I might have considered Mark's answer.

Answer 1

You have to put it first

<h3><input type="button" style="float: right">Order Details</h3>