How to align input and select form elements in one row

Question

How can I align the input and select form elements in my test case, so that their horizontal borders are aligned and all text including labels is aligned to the baseline?

I want to have a label and an input form element along with another label and a select form element in one row. Therefore I want to have horizontal borders of select and input elements aligned, and I also want to have all text including labels aligned to the baseline. Is it possible?

I was unable to achieve it on IE8 or FF on Win. I tried box-sizing: border-box; to force input and select to be rendered using the same box model.

See my test case, which has this 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;
}

Answer 1

I suggest adding this style to the select and input elements:

vertical-align: bottom;

You can add padding to the select element. However, you will get some whitespace around the drop-down arrow. 2px should be okay, but play around with it. This should help with the text baselines.