Выравнивание текстовых полей с помощью CSS выталкивает метки

Я пытаюсь выровнять секцию текстовых полей, но допускаю ярлыки между ними. К сожалению, их отбрасывают. Я уверен, что это может быть тип поля css, о котором я не знаю, что это сработает, но, возможно, кто-то может помочь.

<div id="boxalign2">
            <p>
              <label>Contact Info</label><br>
              <label>Email:</label> <input type="text"/>
              <label>Office #:</label> <input type="text"/>
              <label>Other:</label> <input type="text"/>

              <label>Preferred method of contact</label>
                <select id = "myList">
                    <option value = "1">Email</option>
                    <option value = "2">Phone</option>
                </select>
            </p>

CSS

#boxalign2 p label{
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}

Если приведенное выше не показывает мою проблему, вот и все: http://jsfiddle.net/HLLVt/