html - この選択要素を垂直方向に揃える方法

Question

基本的なcssの質問があります。フォームに css を追加しようとしています。コードは以下のとおりです。

<div id="content">
<form id="form1" method="post" action="">
  <p>
    <label for="name" class="title">Your name:</label>
    <input name="name" type="text" class="widebox" id="name">
  </p>
  <p>
    Colour: <select name="colour_pref" size "1">
    <option value="1">Pink</option>
    <option value="2">Blue</option>
    <option value="3">White</option></select>
  </p>
  <p class="submit">
    <input type="submit" name="add" value="add_colour" id="add">
  </p>
</form>
</div>

これはcssです：

#content p {
    border-bottom: 1px solid #efefef;
    margin: 10px;
    padding-bottom: 10px;
    width: 260px;}
.title {
    float: left;
    width: 100px;
    text-align: right;
    padding-right: 10px;}
.submit {
    text-align: right;}

問題は、select 要素が名前フィールドと一致していないことです。class="title" を追加しようとしましたが、さらに面倒になりました。この選択要素をテキストフィールドと垂直に揃えるのを手伝っていただければ、本当に感謝しています。ありがとう