How to vertically align label and textfield?

Question

I have the following page that looks like this:

Notice how the textfield is NOT ALIGNED with the label. How do I fix this.

Here is the html code:

<div class="main-body">
    <div id="search-box">
        <label class="label-major text-field-label" for="search">
            Find:
        </label>
        <input type="text" name="search" class="text-field-control-major" />
    </div>
</div>

Here is the CSS:

.label-section, .label-major {
    font-size: 2.5em;
    font-family: "courier new";
    display: inline-block;
}

.label-major {
    font-weight: bold;
}

.text-field, .text-field-control-major, .text-field-control-compressed, .text-field-form-input {
    padding: 0.15em;
    display: inline-block;
}

.text-field-control-major {
    font-size: 1.1em;
    height: 1.4em;
    width: 25em;
}

#search-box {
    vertical-align: middle; /* I hoped this would help, but it had no effect*/
}

And here is a JSFiddle: http://jsfiddle.net/2Q86w/

Answer 1

Add vertical-align: middle; to .label-major and .text-field-control-major. CSS will look like:

.label-section, .label-major {
    font-size: 2.5em;
    font-family: "courier new";
    display: inline-block;
    vertical-align: middle;
}

.text-field-control-major {
    font-size: 1.1em;
    height: 1.4em;
    width: 25em;
    vertical-align: middle;
}

Answer 2

try this ;)

<div class="container">
<div class="label"></div>
<div class="textbox"></div>
</div>

.container { clear: both; } .label { float: left; width: _ } .textbox{ float: left; }