I am trying to arrange two form fields side by side horizontally, but I am having an issue where the second field is slightly lower than the first field. I am currently using display:inline-block in the CSS to achieve the horizontal alignment.
Below is the CSS I am using:
.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;
}
Here is the HTML output for the entire form:
<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 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>
Attached is a screenshot illustrating the issue: