title: Label and input layout using css
body: <p>I'm trying to line up a label and an input box on the same line in such a way that the label takes up all the space it needs and then the input box uses all of the remaining space. For example if the container was 1000px and the label was 342px then the input should be 658px wide. But if the label changed to 100px the input should resize to 900px. I could do this using a table layout, or using JavaScript to resize the input box when the label width changes but ideally I would like to do this using only css. My html looks like this.</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;label for="inputBox"&gt;variable text&lt;/label&gt;
    &lt;input type="text" id="inputBox" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Edit: To help illustrate what I'm trying to do here is an example using tables.</p>
  
  <pre><code>&lt;table style="background-color:#ddd;width:500px;"&gt;
    &lt;tr&gt;
      &lt;td style="width:0;white-space:nowrap;"&gt;&lt;label style="width:100%"&gt;text&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input style="width:100%" type="text" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>