How to align label and select box vertically (middle)

Question

For the CSS gurus out there, I cannot figure out the css that makes the first label/select pair not middle align, but the second one does align in the middle.

See the problem in the image below. My goal is to make the first label/select pair align in the middle and to understand the css rules that make it happen.

<div class="pure">
    <form class="pure-form-inline">
        <div class="pure-g">
            <div class="pure-u labelArea">
                <label>Choose Project:</label>
            </div>
            <div class="pure-u-1-4">
                <select></select>
            </div>
        </div>
        <div class="pure-control-group">
            <label>Choose Customer:</label>
            <select></select>
        </div>
    </form>
</div>

Here is where you can see this in action...Fiddle

Answer 1

An easy way to do this is to give the label elements a line-height equal to that of the height of the dropdown selector. However, this solution depends on your labels only being a single line of text, if you have any labels that are multi-line it will not work and you should use the vertical-align method detailed above.

label {
    line-height:25px;
}

Updated JSFiddle