title: How to make element fill remaining width, when sibling has variable width?
body: <p>In the example below:
  <img src="https://i.stack.imgur.com/BNv4U.png" alt="enter image description here"></p>
  
  <p>I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).</p>
  
  <p>I have tried the solutions proposed to similar questions without any luck :(</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/ruben_diaz/cAHb8/" rel="noreferrer">http://jsfiddle.net/ruben_diaz/cAHb8/</a></p>
  
  <p>Here is the html:
  </p>
  
  <pre><code>&lt;div id="form_wrapper"&gt;
      &lt;form accept-charset="UTF-8" action="/some_action" method="post"&gt;
          &lt;span class="category_dropdown_container"&gt;
              &lt;select class="chosen chzn-done" name="question[category_id]" id="selQJK"&gt;
                  &lt;option value="1"&gt;General&lt;/option&gt;
                  &lt;option value="2"&gt;Fruits&lt;/option&gt;
                  &lt;option value="3"&gt;Ice Creams&lt;/option&gt;
                  &lt;option value="4"&gt;Candy&lt;/option&gt;
              &lt;/select&gt;
          &lt;/span&gt;
          &lt;span class="resizable_text_box"&gt;
              &lt;input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /&gt;
          &lt;/span&gt;
          &lt;input name="commit" type="submit" value="Ask!" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here the css:</p>
  
  <pre><code>#form_wrapper {
      border: 1px solid blue;
      width: 600px;
      padding: 5px;
  }
  form {
      display: inline-block;
      width: 100%;
  }
  .category_dropdown_container {
  }
  .resizable_text_box {
      border: 1px solid red;
  }
  input[type="text"] {
  }
  input[type="submit"] {
      background-color: lightblue;
      width: 80px;
      float: right;
  }
  </code></pre>