How to align a shortcut and select a field vertically (in the middle)

Question

For the CSS guru there, I can’t understand CSS, which makes the first shortcut / selection pair not middle, but the second aligned in the middle.

See the problem in the image below. My goal is to make the first mark / select a pair in the middle and understand the css rules that do this.

<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 you can see it in action ... Fiddle

Answer 1

- label , . , , , , , vertical-align, .

label {
    line-height:25px;
}

JSFiddle

Answer 2

label, select {
    display: inline-block;
    vertical-align: middle;
}

Answer 3

:

/* Fix */

.valign:before {
    content:"";
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.valign > * {
    display: inline-block;

}
.valign-m { vertical-align: middle; }

(.valign) (, )

(select + label)

, .

Answer 4

.pure .pure-u {
    line-height:25px;
}

Answer 5

div label/select, .

If you remove the unnecessary divaround the first pair label/ selectand add the same class as in the second, you should be fine

<div class="pure">
    <form class="pure-form-inline">
        <div class="pure-control-group">
            <label>Choose Project:</label>
            <select></select>
        </div>
        <div class="pure-control-group">
            <label>Choose Customer:</label>
            <select></select>
        </div>
    </form>
</div>

Changed by JSFiddle