title: How to make search field responsive
body: <p>I'm attempting to add a search field to a responsive sidebar, and want the field to responsively scale to the width of the sidebar, while keeping the 'submit' button at a set width, on the same line as the search field.</p>
  
  <hr>
  
  <p>I've been able to mock up the effect with divs, but when applying the same styles to the form elements, the search field will always fill the full width of the form element:</p>
  
  <p><a href="http://dabblet.com/gist/5618200" rel="nofollow">http://dabblet.com/gist/5618200</a></p>
  
  <hr>
  
  <p>I am aware that I can get this to work with percentages:</p>
  
  <p><a href="http://dabblet.com/gist/5618209" rel="nofollow">http://dabblet.com/gist/5618209</a></p>
  
  <p>But I really would like the 'submit' button to have a set width.</p>
  
  <hr>
  
  <p>What can I do to make the form behave -exactly- like the div mockup in my first example?</p>