title: How can I put an icon and an input text on the same line?
body: <p>I want to put an icon on the left and an input type text on the right occupying all the remaining space.</p>
  
  <pre><code>----------------------------------------------------
  | [ico]  ----------------------------------------  |
  |        |   input type="text"                  |  |
  |        ----------------------------------------  |
  ----------------------------------------------------
  </code></pre>
  
  <p>If I set both with <code>display: inline-block</code> and set the <strong>input's width to <code>100%</code></strong> it <strong>jumps the line</strong>, because <code>100%</code> is <strong>not considering the <code>space - icosize</code></strong>...</p>
  
  <p>I want to <strong>expand the input to the remaining available space</strong> (<strong>I don't care for vertical align</strong>). Is there a way to achieve this behavior without using tables?</p>
  
  <blockquote>
    <p><strong><a href="http://jsfiddle.net/sUYBS/" rel="nofollow">An example of the problem on jsFiddle.</a></strong></p>
  </blockquote>