Comment aligner d'entrée et de sélectionner les éléments de formulaire dans une rangée

Comment puis-je aligner les input et select éléments de formulaire dans mon cas de test, de sorte que leur horizontal frontières sont alignées et l'ensemble du texte, y compris les étiquettes est aligné sur la ligne de base?

Je veux avoir un label et un input élément de formulaire avec un autre label et un select élément de formulaire dans une ligne. Donc je veux avoir horizontale frontières de select et input éléments alignés, et je veux aussi avoir tout le texte, y compris les étiquettes
aligné à la de base. Est-il possible?

J'ai été incapable de le réaliser sur IE8 ou FF sur Win. J'ai essayé box-sizing:
border-box;
à force input et select être rendu à l'aide de la même
modèle de boîte.

Voir mon cas de test, qui a ce code:

<form action="Submit" method="post">
    <p>
        <label>Sex<select><option value="" selected="selected">Sex</option></select></label>
        <label>Date of Birth<input type="text" value="Date of Birth" /></label>
    </p>
</form>
body, input, select {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
}

select, input {
    height: 20px;
    padding: 0;
    margin: 0;
    border: 1px solid gray;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

label {
    padding: 0;
    margin: 0;
}

OriginalL'auteur Michal Čizmazia | 2010-10-26