title: Dynamic Resize of Text Field
body: <p>There is a portion of a web app that I am writing that is being a particular pain to make look really nice and neat like I want it.  I have a button with a fixed width next to a form that contains text, an input text box, and a submit button.  I want the width of the input box to resize based on the width of the screen but I don't know how to do without making a piece fall onto the next line.</p>
  
  <p>Here is a fiddle of the problem: <a href="http://jsfiddle.net/Yt3V2/" rel="nofollow">http://jsfiddle.net/Yt3V2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;button type="button" class="new_button"&gt;Create New&lt;/button&gt;
    &lt;form name="input" action="" method="post"&gt;
      Search: 
      &lt;input type="text" class="search_input"&gt;&lt;/input&gt;
      &lt;input type="submit" value="Submit"&gt;&lt;/input&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.new_button
  {
    float: left;
    min-width: 120px;
  }
  
  .search_input
  {
    width: /* What could go here? */;
  }
  </code></pre>
  
  <p>A lot of suggestions included making a table out of the CSS, which gets me pretty close but the text box will still get cut off: <a href="http://jsfiddle.net/G9pDw/" rel="nofollow">http://jsfiddle.net/G9pDw/</a></p>
  
  <p>Is there any way to get the input text box to resize dynamically and still fit where I want it to?</p>