title: Align a DIV along other elements on the same line, inside a TD
body: <p>I need Column 3 to look just like Column 1.</p>
  
  <p>I see it behaves that way because of the DIV. If I take it out, it works.</p>
  
  <p>Criteria:</p>
  
  <ul>
  <li>There must be a DIV inside Column 3 (it is out of my control);</li>
  <li>I'd like Column 3 to occupy 50% of the table;</li>
  <li>Shouldn't need to add another elements to wrap the others</li>
  <li>BUTTON can have a fixed width;</li>
  <li>SELECT should fill all available space of TD.</li>
  </ul>
  
  <p>I could add <code>float: left</code> or <code>display: inline-block</code> to DIV, but I would also need the <code>select</code> to stretch.</p>
  
  <p>I'm using Bootstrap, so it is ok to suggest it, given it satifies criteria.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    background: yellow;
  }
  
  td {
    border: red 2px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Column 1&lt;/th&gt;
        &lt;th&gt;Column 2&lt;/th&gt;
        &lt;th&gt;Column 3&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;select name="person"&gt;
            &lt;option value="1"&gt;Item 1&lt;/option&gt;
          &lt;/select&gt;
          &lt;button type="button"&gt;ADD&lt;/button&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="text" value="100"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div&gt;
            &lt;select name="person"&gt;
              &lt;option value="1"&gt;Item 1&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;button type="button"&gt;ADD&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>