What is the correct css width to make these text boxes line up?

Question

I have two rows within a HTML table. Here is a simplified view of it:

#topTextbox {
  width: 98%;
}

#bottomTextbox {
  width: 693px;
}

<table>
  <tr>
    <td>
      <input type=text id=topTextbox />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option value="0"></option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
      </select>
      <input type=text id=bottomTextbox />
    </td>
  </tr>
</table>

The first row has one long textbox and the second row has a dropdown and a textbox. I am trying to get it so these line up with the same total width. The issue is that as new data comes into the dropdown the width will change so I am trying to figure out the correct css on the bottom textbox so it lines up on the right side with the top textbox.

Here is what it looks like in Firefox:

Here is what it looks like in IE:

So I have an issue today that they don't line up across browsers as well as the fact that this will get worse as items are added to the dropdown (since the bottom has a fixed width).

What is the correct way to keep these textboxes aligned on the right no matter how big the overall table gets as well as new items are added to the dropdown?

Answer 1

This the following approach involves CSS3 box-sizing and calc(). It works fine on IE9+ and all modern browsers.

table {
  width: 100%;
}
input,
select {
  box-sizing: border-box;
  display: inline-block;
}
#topTextbox {
  width: 100%;
}
select {
  width: calc(30% - 4px);
  /* why 4px? http://stackoverflow.com/q/5078239/483779 */
}
#bottomTextbox {
  width: 70%;
}

<table>
  <tr>
    <td>
      <input type="text" id="topTextbox" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option value="0"></option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
      </select>
      <input type="text" id="bottomTextbox" />
    </td>
  </tr>
</table>