Align <input> & <button> tags

Question

I have an ordered list which has a <input type="text"... and <button> field. When I render them I get the fields in 2 separate lines. How do I get them to come in the same line?

HTML-

<li>
    <input type="text" value="Paste URL here"></input>
    <button id="i">Go</button>
</li>

I have even removed them from <li> & put them in a separate <div> with no success. What CSS needs to be added here to overcome this default behavior?

UPDATE: I have now removed these 2 tags from the ordered list & put them in a <div>. It looks like this now -

<div style="display: inline-block">
    <input id="url" type="text" value="Paste URL here"></input>
    <button id="i" style="font-size:10px; margin:2px;">Go</button>
</div>

No effect on trying float:left; or display:inline-block.

Answer 1

<div style="width: 100%;">
    <input type="text" style="float: left; width: 200px;" id="url" value="Paste URL here">
    <button style="font-size: 10px; margin: 2px; float: left;" id="i">Go</button>
</div>