Textarea нажимает на элемент слева от него?

Question

У меня есть следующая схема: fiddle.

<div> 
<div class="left"> 
    <div>label not aligned</div> 
</div> 
<div class="right"> 
    <div><textarea></textarea></div> 
</div> 
</div> 
<div> 
<div class="left"> 
    <div>label aligned</div> 
</div> 
<div class="right"> 
    <div><input></input></div> 
</div> 
</div> 
/*...css in the fiddle*/ 

В нем вы можете видеть, что есть 2 строки, одна с текстовой и другой с входом для сравнения. Поскольку вы можете видеть, что метка первой строки нажата, даже если высота и высота строки такие же, как в правом столбце. Во 2-й строке с входом вы можете увидеть поведение, которое я ожидал, когда метка по существу сосредоточена и совмещена с входом справа. Это происходит, даже если текстовое поле не изменяет размер.

Кто-нибудь знает, почему это происходит? Я знаю, как заставить его работать, используя float влево, но я хотел знать, есть ли более чистое решение. Заранее спасибо.

Answer 1

Добавить vertical-align: top в свой .left класса, как показано ниже:

.left{ 
    border: 1px solid black; 
    vertical-align: top; 
} 

Updated Fiddle