How to vertically align text in a div next to another div containing a select element

Question

I want to vertically align "text" with the select element. They both need to be inside separate divs. Is this possible?

<fieldset>
<div style="display:inline-block;float:left;vertical-align:middle">
    text
</div>
<div style="display:inline-block;float:left">
    <select>
        <option>select
        </option>
    </select>
    properly aligned
</div>
</fieldset>    

http://jsfiddle.net/ATN8n/1/

Answer 1

Because your texts are both in separate divs, these 2 divs should have the same height, then we have to change the vertical-align accordingly like this:

<div style="display:inline-block; float:left; height: 30px;">
    text
</div>
<div style="display:inline-block; float:left; height:30px;">
    <select>
        <option>select
        </option>
    </select>            
</div>

div:before {
 content:'';
 display:inline-block;
 height:100%;
 vertical-align:middle;
}

Here is the fiddle

Answer 2

Wrap your text in a span tag like this:

<span>text</span>

then style it like this:

span {
    display: inline-block; 
    vertical-align: middle;
}

edit: Fiddle