title: Select box to fill remaining space
body: <p>On my form I am trying to have my select box take up the row except enough room to show the button on the same row.</p>
  
  <p>I am after a responsive design, so as I resize the page then of course with size of the select box should resize as well to take into account that size.</p>
  
  <p>I can set a percentage on the select, but as it goes up and down sometimes I end up with a large gap, or the button goes onto a new line.</p>
  
  <pre><code>html
  
  &lt;form class="form-horizontal"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-xs-3 control-label" for="droplist"&gt;Select item:&lt;/label&gt;
          &lt;div class="col-xs-9"&gt;
              &lt;select id="droplist"&gt;
                  &lt;option&gt;Value 1&lt;/option&gt;
                  &lt;option&gt;Value 2&lt;/option&gt;
              &lt;/select&gt;
              &lt;button class="btn btn-primary"&gt;Action!&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  css
  select {
      width: 80%;
  }
  </code></pre>
  
  <p>Is there a way to have both the select and the button on the same line, and the select just resizes with the page?</p>
  
  <p>fiddle; <a href="http://jsfiddle.net/sJT6C/" rel="noreferrer">http://jsfiddle.net/sJT6C/</a></p>