Input and button inline

Question

Is there a multi-browser way to inline input and button? See http://jsfiddle.net/wf592/. Input appears below button. Simple margin doesn't help:

<div>
<input type="text" style="margin-top:-50px;" /><button style="height:25px; width:20px"  />
</div>

This error showed up when I used jQueryUI calendar: calendar button is automatically inserted after the input tag. So I don't want to change markup with more divs.

Answer 1

Demo Fiddle

Add:

input, button{
    vertical-align:middle;
}

More on vertical-align from MDN:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.