Я уже расписывал это момент более подробно в вопросе Логика размещения дочерних блоков в HTML/CSS
Все дело в свойстве vertical-align, для inline элементов значение которого по умолчанию равняется "baseline".
Именно поэтому Вы видите что элемент label
выровнен по нижнему краю относительно textarea
.
Сейчас выровнено по верхнему краю:
body {
font-family: sans-serif;
}
fieldset {
border: 4px solid green;
}
legend {
background: yellow;
}
label {
vertical-align: top;
}
textarea {
resize: none;
}
<form action="#">
<fieldset>
<legend>Личная информация</legend>
<label for="1">Имя</label><input title="Введите свое имя" id="1" type="text" name="name"> <br>
<label for="2">Email</label> <input id="2" type="email"> <br>
<label for="3">Пароль</label> <input id="3" type="password">
<br>
<br>
<label for="4">О себе </label> <textarea name="comment" id="4" cols="" rows=""></textarea>
</fieldset>
</form>