title: How to stretch the width of an element, so that it's 100% - widths of its siblings?
body: <p>Say, I have the following unordered list. The button has <code>width: auto</code>. How do I style the elements, so <code>#textField</code> would stretch as much as possible, so the width of <code>#textField</code> and the button would add up to 100%? I.e. <code>#textField</code>'s width == (100% of width) - (button's computed width).</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;input id="textField" type="text" /&gt;&lt;input type="button" /&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So, for example, let's say 100% width of <code>li</code> is 100 pixels: if the button's computed width is 30px, <code>#textField</code>'s width would be 70px; if button's computed width is 25px, <code>#textField</code>'s width would become 75px. </p>