aligning the first and last name

I have this page and i want to align the first and last name and i have no idea what is causing the last name to be below the first name...any ideas

here is my html

<div id="double-mc-field-group" class="mc-field-group">
  <span class="left_name"><label for="mce-FNAM开发者_StackOverflow社区E">First Name</label>&nbsp;<input id="mce-FNAME" name="FNAME" type="text" /></span>
  <span class="right_name"><label for="mce-LNAME">Last Name </label>&nbsp;<input id="mce-LNAME" name="LNAME" type="text" /></span>
</div>
<div id="after_name" class="mc-field-group">
    <label for="mce-EMAIL">Email Address <strong class="note-required">*</strong></label>&nbsp;
    <input id="mce-EMAIL" class="required email" name="EMAIL" type="text" />
</div>

and my css

#columns-container .left_name{
    float:left;
    width:220px;
}

#columns-container .left_name input, #columns-container .right_name input{
    width:200px;
}

#columns-container .right_name{
    float:right;
    width:220px;
}

#columns-container #after_name{
    clear:both;
}

#columns-container .mc-field-group{
    width:220px;
}

#columns-container #double-mc-field-group{
    width:440px;
}

any ideas what i am doing wrong...i figured i could just float left and right and set the width to half the portion and it would be aligned...not sure what i missed

The HTML on your page has a br tag between the two spans. Get rid of it and you're golden!

There is a <br /> in the code on the page that isn't in the code you posted that's causing it.

I assume you want something like this: http://jsfiddle.net/NWwqe/