title: Bootstrap Table Placement of Cells in Row
body: <p>I have a Bootstrap table with 2 columns which appears correctly as follows:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  
  &lt;table class="table table-bordered"&gt;
    &lt;tr&gt;
      &lt;td&gt;Address One:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Address Two:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Suburb:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;State:&lt;/td&gt;
      &lt;td&gt;
        &lt;select class="form-control shipmentState" name="shipToState" id="shipToState"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;option value="ACT"&gt;ACT&lt;/option&gt;
          &lt;option value="NSW"&gt;NSW&lt;/option&gt;
          &lt;option value="NT"&gt;NT&lt;/option&gt;
          &lt;option value="QLD"&gt;QLD&lt;/option&gt;
          &lt;option value="SA"&gt;SA&lt;/option&gt;
          &lt;option value="TAS"&gt;TAS&lt;/option&gt;
          &lt;option value="VIC"&gt;VIC&lt;/option&gt;
          &lt;option value="WA"&gt;WA&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Postcode:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Country:&lt;/td&gt;
      &lt;td&gt;
        &lt;select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;option value="Australia"&gt;Australia&lt;/option&gt;
          &lt;option value="Japan"&gt;Japan&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Phone:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I would now like to combine the State and Postcode so they appear on the same line as they don't require a lot of space each, but when I combine these they stretch outside of the other rows like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  
  &lt;table class="table table-bordered"&gt;
    &lt;tr&gt;
      &lt;td&gt;Address One:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Address Two:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Suburb:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;State:&lt;/td&gt;
      &lt;td&gt;
        &lt;select class="form-control shipmentState" name="shipToState" id="shipToState"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;option value="ACT"&gt;ACT&lt;/option&gt;
          &lt;option value="NSW"&gt;NSW&lt;/option&gt;
          &lt;option value="NT"&gt;NT&lt;/option&gt;
          &lt;option value="QLD"&gt;QLD&lt;/option&gt;
          &lt;option value="SA"&gt;SA&lt;/option&gt;
          &lt;option value="TAS"&gt;TAS&lt;/option&gt;
          &lt;option value="VIC"&gt;VIC&lt;/option&gt;
          &lt;option value="WA"&gt;WA&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td&gt;Postcode:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Country:&lt;/td&gt;
      &lt;td&gt;
        &lt;select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;option value="Australia"&gt;Australia&lt;/option&gt;
          &lt;option value="Japan"&gt;Japan&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Phone:&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and I can't work out how to keep the original width and combine the state/postcode into that original width.</p>