title: Two input fields in one row, align one left and the other right
body: <p>I want to have a form which consists of different input fields. On some rows there should be two input fields. The second one should be aligned right.</p>
  
  <p><strong><a href="http://jsfiddle.net/KxUgt/" rel="nofollow">jsFiddle</a></strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input type="text" name="first-name" class="form-first-name" /&gt;&amp;nbsp;
              &lt;input type="text" name="last-name" class="form-last-name" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="empty-row"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input type="text" name="address-1" class="form-address-1" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.form-address-1 {
      width: 100%;
  }
  
  .form-first-name, .form-last-name {
      width: 46%;
  }
  
  .form-last-name {
      float: right;
  }
  </code></pre>
  
  <p>My problem is that the input fields have different sizes and so the size of the row somehow changes. I tried to set the width of <code>tr</code> without success. How can I align the second input field right?</p>