Deux champs de saisie sur une seule ligne, de les aligner un à gauche et l'autre droite

Je veux avoir une forme qui se compose de différents champs de saisie. Sur certaines lignes il devrait y avoir deux champs de saisie. Le second doit être aligné à droite.

jsFiddle

HTML:

<table>
    <tr>
        <td>
            <input type="text" name="first-name" class="form-first-name" />&nbsp;
            <input type="text" name="last-name" class="form-last-name" />
        </td>
    </tr>
    <tr>
        <td class="empty-row">&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="address-1" class="form-address-1" />
        </td>
    </tr>
</table>

CSS:

.form-address-1 {
    width: 100%;
}

.form-first-name, .form-last-name {
    width: 46%;
}

.form-last-name {
    float: right;
}

Mon problème est que les champs de saisie de tailles différentes et donc la taille de la ligne en quelque sorte des changements. J'ai essayé de régler la largeur de tr sans succès. Comment puis-je aligner le deuxième champ de saisie à droite?

InformationsquelleAutor testing | 2013-09-26