HTML - forms - label

by scheinercc

HTML

<!doctype html> 
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Basic HTML5 Template</title>
    </head>
    <body>

        <form id="app-login" action="process.php">
            <fieldset>
                <legend>Personal Details</legend>
                <div class="form-item">
                    <label for="firstName">First name:</label>
                    <input id="firstName" type="text">
                </div>
                <div class="form-item">
                    <label for="lastName">Last name:</label>
                    <input id="lastName" type="text">
                </div>
                <div class="form-item form-item-type-2">
                    <input id="submit" type="submit" value="Submit">
                </div>
            </fieldset>
        </form>

    </body>
</html>

CSS

html {
  font: 14px/1.4em sans-serif;
}

.form-item {
    margin-bottom: 1em;
    padding: .5em;
    background-color: #ddd;
    border-radius: 3px;
}

.form-item-type-2 {
    margin-bottom: 0;
    display: inline;
}

label {
    display: inline-block;
    width: 6em;
}