HTML/CSS aligning two inputs and text underneath

Question

I am trying to place two input forms next to eachother and position some text underneath them. Somehow it never ends up aligned correctly. This picture shows what I am trying to do:

HTML:

<form action="#" class="cleanForm" method="POST">
    <fieldset>
        <input type="text" name="firstname" placeholder="first name" required>
        <em>Please enter your first name</em>

        <input type="text" name="lastname" placeholder="last name" required>
        <em>Enter your last name</em>

        <input type="email" name="email"  placeholder="e-mail" required>
        <em>Enter your e-mail address</em>

        <input type="email" name="email2" placeholder="re-enter e-mail" required>
        <em>Re-enter your e-mail address</em>

        <input type="password" name="password" placeholder="password" required>
        <em>Enter a password between 8 and 20 digits</em>

        <input type="password" name="password2" placeholder="re-enter password" required />
        <em>Re-enter the password</em>

        <p>
            <input type="radio" name="gender" value="Female" checked>
            <label for="female">Female</label>

            <input type="radio" name="gender" value="Male">
            <label for="male">Male</label>
        </p>

        <p>
            <input type="checkbox" id="agree-TOS">
            <label for="agree-TOS">I have read and agree to the <a href="#">Terms of Service</a>.</label>
        </p>

        <input type="submit" value="Create account">
    </fieldset>
</form>

CSS:

form.cleanForm {
    width:700px;
    margin:0 auto;
}

form.cleanForm p {
    margin-bottom:15px;
}

input[type="email"], input[type="password"], input[type="text"]  {
    font-family: Arial, Sans-Serif;
    font-size: 18px;
    color: #adadad;
    padding: 10px;
    outline:none;   
    float:left;
    border: solid 1px #adadad;
    width: 230px;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
    -webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
    box-shadow:inset 0 0 5px 5px #E6E6E6;
    clear: right;
}

input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,
input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
    border:1px solid #FF003F;   
} 
form.cleanForm em {
    font-size:12px;
}

Solution 1

I think your markup needs a redo. Use <label>s to describe form element labels, not <em>s. There's no semantic value in the emphasis. Also, you can use the labels themselves to align the form easily. Here's my code (Live Example Here):

HTML

<form action="#" class="cleanForm" method="POST">
    <fieldset>
        <label><input type="text" name="firstname" placeholder="first name" required>
        Please enter your first name</label>

        <label><input type="text" name="lastname" placeholder="last name" required>
        Enter your last name</label>

        <label><input type="email" name="email"  placeholder="e-mail" required>
        Enter your e-mail address</label>

        <label><input type="email" name="email2" placeholder="re-enter e-mail" required>
        Re-enter your e-mail address</label>

        <label><input type="password" name="password" placeholder="password" required>
        Enter a password between 8 and 20 digits</label>

        <label><input type="password" name="password2" placeholder="re-enter password" required>
        Re-enter the password</label>

        <div id="gender">
            <label><input type="radio" name="gender" value="Female" checked>
            Female</label>

            <label><input type="radio" name="gender" value="Male">
            Male</label>
        </div>

        <label class="tos"><input type="checkbox" id="agree-TOS">
        I have read and agree to the <a href="#">Terms of Service</a>.</label>
    </fieldset>
    <button type="submit">Create account</button>
</form>

CSS

.cleanForm {
    width: 550px;
}

fieldset > label > input {
    display: block;
}
input[type="checkbox"] {
    display: inline;
}
label {
    margin: 10px;
    padding: 5px;
}
fieldset > label {
    float: left;
    width: 200px;
}
label:nth-child(2n+1) {
    clear: both;
}
#gender, .tos, button {
    clear: both;
}
.tos {
    width: 400px;
}

input[type="text"], input[type="email"], input[type="password"] {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);

    padding: 5px;
}

Solution 2

You're applying float:left to the <input>s, but not to the <em>s. That's why all the fields are pushed to the left, while the labels remain in the ordinary page flow.

One possible solution is wrapping both of them in a <div> and applying the float to that:

HTML:

<div class="field">
    <input type="text" name="firstname" placeholder="first name" required />
    <em>Please enter your first name</em>
</di>

CSS:

div.field {
    float: left;
}

Also, it would be more sematically correct to use a <label> instead of an <em>.