Jquery form feedback jumping down a line

Jquery form feedback jumping down a line

Hi, I really am new to all this. I got this form


<div class="mainText">
<h2>Register</h2>
<h4>Fields marked with a * are required</h4>
<form action="admin/register.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="submitted" value="1"> 
<p>Login Information:</p>
<p class="form">Username: *<input name="username" id="username" type="text" size="20" class="rounded"/><span id="userAvailability"></span></p>
<p>Password: *<input id="password1" type="password" size="20" name="password1" class="rounded"  minlength="8"></p>
<p>Confirm Password: *<input id="password2" type="password" size="20" name="password2" class="rounded"><span id="feedback1"></span></p>
<h4>Personal Information</h4>
<p>First Name: *<input id="firstname" type="text"  size="20" name="firstname" class="rounded"></p>
<p>Surname: *<input id="surname" type="text" size="20" name="surname" class="rounded"></p>
<p>Email: *<input id="email" type="email" size="20" name="email" class="rounded"></p>
<p>Email Confirm: *<input id="emailconfirm" type="email" size="20" name="emailconfirm" class="rounded"><span id="emailMatch"></span></p>
<p>Address Line 1: *<input id="address1" type="text"  size="20" name="address1" class="rounded"></p>
<p>Address Line 2: <input id="address2" type="text" size="20" name="address2" class="rounded"></p>
<p>City/Town: *<input id="town" type="text" size="20" name="town" class="rounded"></p>
<p>County/State: *<input id="county" type="text" size="20" name="county" class="rounded"></p>
<p>Country: *<input id="country" type="text" size="20" name="country" class="rounded"></p>
<p>Postcode: *<input id="postcode" type="text" size="20" name="postcode" class="rounded"></p>
<p>Date Of Birth: *    <input id="dob" type="text" size="20" name="dob" class="rounded"></p>
<h5>PayPal</h5>
<p>PayPal Email: *<input id="paypalemail" type="email" size="20" name="paypalemail" class="rounded"> </p>
<p>PayPal Email Confirm *<input id="paypalconfirm" type="email" size="20" name="paypalconfirm" class="rounded"> <span id="paypalEmailMatch"></span></p>
<p>Any money made from your sales, will be sent to this email address.</p>
<h5>Terms and Conditions</h5>
<p><input type='checkbox' class='check'> I agree to the <a id="termsShow" href="terms.php">terms and conditions of this site</a> *</p>
<p>Add some image verification here</p>
<p><input id='sub' type='submit' value='Register' disabled='disabled'></p>
</form>
</div>

And this to display the feedback back to the user, but instead of appearing next to the form input field, it jumps down a line. Any ideas are much appreciated.


// Check emails match

$("#emailconfirm").keyup(function(){
    if ($("#email").val() != $("#emailconfirm").val()) {
     $('#emailMatch').text('  ' + 'Emails do not match!').css('color', 'red').addClass('bold');;
  } else {
 
  $('#emailMatch').text('  ' + 'Emails match!').css('color', 'green').addClass('bold');
}
});