title: How to make a text entry box take up all remaining space left by the button to its right?
body: <p>I'm tempting to resort to tables here since I cannot seem to come up with some CSS that will accomplish what I'm trying to create here.</p>
  
  <p>I have a <code>&lt;div&gt;</code> container that contains two things:</p>
  
  <ul>
  <li>a text entry box (<code>&lt;input type='text' /&gt;</code>)</li>
  <li>a button (<code>&lt;input type='button' /&gt;</code>)</li>
  </ul>
  
  <p>I want the button right-aligned (I haven't given it a fixed width, but I easily could). The text entry box should be directly left of the button and take up the remaining space. Here is an example of what I'm looking for:</p>
  
  <p><img src="https://i.stack.imgur.com/2UXRO.png" alt="enter image description here"></p>
  
  <p>Unfortunately, the following HTML isn't accomplishing this (pardon the inline styles - for demonstration purposes only):</p>
  
  <pre><code>&lt;input type="button" value="Test" style="float: right;" /&gt;
  &lt;input type="text" style="display: block; width: 100%;" /&gt;
  </code></pre>
  
  <p>I <a href="http://jsfiddle.net/wE7jc/1/" rel="nofollow noreferrer">tried adding a <code>&lt;div&gt;</code> wrapper</a>, but that didn't work either. What am I doing wrong? I could accomplish this easily with a <code>&lt;table&gt;</code> layout, but I'm sure I must be missing something and that there is a better way of doing it.</p>