title: Align <input> & <button> tags
body: <p>I have an ordered list which has a <code>&lt;input type="text"...</code> and <code>&lt;button&gt;</code> field. When I render them I get the fields in 2 separate lines. How do I get them to come in the same line?</p>
  
  <p>HTML-</p>
  
  <pre><code>&lt;li&gt;
      &lt;input type="text" value="Paste URL here"&gt;&lt;/input&gt;
      &lt;button id="i"&gt;Go&lt;/button&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I have even removed them from <code>&lt;li&gt;</code> &amp; put them in a separate <code>&lt;div&gt;</code> with no success. What CSS needs to be added here to overcome this default behavior? </p>
  
  <p><strong>UPDATE:</strong> I have now removed these 2 tags from the ordered list &amp; put them in a <code>&lt;div&gt;</code>. It looks like this now - </p>
  
  <pre><code>&lt;div style="display: inline-block"&gt;
      &lt;input id="url" type="text" value="Paste URL here"&gt;&lt;/input&gt;
      &lt;button id="i" style="font-size:10px; margin:2px;"&gt;Go&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>No effect on trying <code>float:left;</code> or <code>display:inline-block</code>.</p>