CSS - Can't get two form fields to sit next to each other horizontally

Question

I have two form fields that I want to sit next to each other horizontally - I've got them both next to each other using display:inline-block in the css, but the second form field is slightly lower down than the first.

Here is my CSS:

.mu_register #first_name, .mu_register #last_name {
width: 47%;
font-size: 24px;
margin: 5px 5px 0px 0px;
display: inline-block;
float: left;
position: relative;
}

Outputted HTML for the whole form is as follows:

<form id="setupform" method="post" action="http://www.skizzar.com/signup-d72/">
    <input type="hidden" name="stage" value="validate-user-signup" />
    <input type='hidden' name='signup_form_id' value='1255869724' />
    <input type="hidden" id="_signup_form" name="_signup_form" value="c914fb64da" />        
<label for="user_name">Username:</label>
    <input name="user_name" type="text" id="user_name" value="" maxlength="60" /><br />(Must be at least 4 characters, letters and numbers only.)
<label for="user_email">Email&nbsp;Address:</label>
    <input name="user_email" type="text" id="user_email" value="" maxlength="200" /><br />We send your registration email to this address. (Double-check your email address before continuing.) 
<label for="first_name">First Name</label>
    <input name="first_name" type="text" id="first_name" value="" maxlength="60" />
<label for="last_name">Last Name</label><input name="last_name" type="text" id="last_name" value="" maxlength="60" />

    <p><input id="signupblog" type="hidden" name="signup_for" value="blog" /></p>

    <p class="submit"><input type="submit" name="submit" class="submit" value="Next" /></p>
</form>

And a screenshot of the issue:

Answer 1

While waiting for you to post your HTML, I created this quick fiddle.

Try adding putting your form inputs and lables into divs called rows and columns. This is how I build all of my forms now days.

<div class="row">
<div class="col">
<span class="label1">First Name</span><input type="Textbox"/>
</div>

<div class="col">
<span class="label1">Last Name</span><input type="Textbox"/>
</div>
</div>

<div class="row">
<div class="col">
<span class="label1">Another Field</span><input type="Textbox"/>
</div>

<div class="col">
<span class="label1">Another Field</span><input type="Textbox"/>
</div>
</div>

Then I style it with CSS along these lines:

.col
{
    float: left;
    width: 20%;
    font-size: 24px;
    padding: 15px;
}


.row{

    padding: 5px 5px; 
    height: auto;
    overflow: auto;
}

input
{ padding: 5px; 
  width: 150px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}

Hope this helps.

Answer 2

change .mu_register #first_name, .mu_register #last_name { to

.mu_register #first_name, #last_name {

Check out the Fiddle

That should work i guess