How to make form line up?

Question

Here is the code on http://jsfiddle.net/8yUSn/

How do I make the 'enter domain name', selector list and button completely line up (on the bottom). I've tried a few things but can't seem to get it right.

HTML

<div id="insideimagesearch" class="elegantaero">

    <form method="get" action="dac" onsubmit="return check_domain_input()"accept-charset="utf-8">
        <h1>Create Your Domain. It's simple.</h1>
        <input type="text" name="domain" value="" placeholder="Enter Domain Name"/>
        <select name="tld" class="tld">
            <option value="">select</option>
            <option value="co.uk">.co.uk</option>
            <option value="me.uk">.me.uk</option>
            <option value="org.uk">.org.uk</option>
            <option value="biz">.biz</option>
            <option value="com">.com</option>
            <option value="info">.info</option>
            <option value="name">.name</option>
            <option value="net">.net</option>
            <option value="org">.org</option>
            <option value="eu">.eu</option>
        </select>
        <input type="button" class="button" value="Search" /> 

    </form> 
</div> <!-- end of insideimagesearch class elegantaero-->

CSS

/* Elegant Aero */
.elegantaero {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background: #DDF0F8;
    padding: 30px 30px 20px 30px;
    box-shadow: #868686 0 0px 10px -1px;
    -webkit-box-shadow: #868686 0 0px 10px -1px;
    font: 12px Arial, Helvetica, sans-serif;
    color: #666;
}
.elegantaero  h1{
    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 20px 10px 20px 30px;
    display: block;
    font-weight: 600;
    color: #FFFFFF;
    background: #44B6F5;
    margin-top: -30px;
    margin-left: -30px;
    margin-right: -30px;
    border-bottom: 1px solid #B9E1F1;
}


.elegantaero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {
    color: #888;
    width: 65%;
    padding: 5px 4px 0px 5px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 16px;
    border: 1px solid #CEE2E7;
    background: #FBFBFB;
    outline: 0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    font: 200 24px/24px Arial, Helvetica, sans-serif;
}
.elegantaero textarea{
    height:100px;

}
.elegantaero select {
    background: #fbfbfb url(../img/index/header/down-arrow.png) right;
    background: #fbfbfb url(../img/index/header/down-arrow.png) no-repeat right;
   appearance:none;
    -webkit-appearance: none; 
   -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 60px;
    height: 30px;
}
.elegantaero .button{
    padding: 10px 30px 10px 30px;
    background: #44B6F5;
    border: none;
    color: #FFF;
    font-weight:bold;
}
.elegantaero .button:hover{
    background: #0977B4;
}

Answer 1

You could set the vertical-align: middle; to the inline elements and remove useless top/bottom margin from your Enter Domain Name input.

.elegantaero input[type="text"],
.elegantaero select,
.elegantaero .button {
    vertical-align: middle;
}

WORKING FIDDLE.