Align label and input inside a table row

Question

I encounter a simple problem at first, but I can not solve. I have a table representing a form with many rows (one in my sample to simplify), having two columns : the first contains a label, the second the input field.

<table>
  <tr>
    <td class="labelcell">
      <div class="label">
        <label>Name</label>
      </div>
    </td>
    <td>
      <div class="control">
        <div class="input">
          <input type="text" value="John" />
        </div>
        <div class="more">+</div>
      </div>
    </td>
  </tr>
</table>

My problem is that the text of the label and the text of the input are not verticaly aligned. Here's a example that reproduce my problem : http://jsfiddle.net/KBz8g/

The label is too low. I don't know how to solve this properly. I do not want to change the first two css rules (reset from meyer and box sizing), although the property vertical-align set to baseline seems suspect.

Answer 1

Would this fiddle help ? http://jsfiddle.net/HujQN/1/

I just reset padding and margins for the parts.

div {
    margin: 0;
    padding: 0;
}