Inline block form elements

by kuyabiye

HTML

<form>
    <ol class="form">
        <li>
            <label for="input1">Username</label>
            <input name="input1" id="input1" />
        </li>
        <li>
            <label for="input2">First Name</label>
            <input name="input2" id="input2" />
        </li>
        <li>
            <label for="input2">Very long input very very long</label>
            <input name="input2" id="input2" />
        </li>        
    </ol>
</form>

CSS

.form {
    padding: 30px;   
}
.form li {
    margin: 0 0 10px;
}

.form label {
    border: 1px solid #000;
    display: inline-block;
    width: 100px;  
}