<label>と<textarea>の位置がズレる

質問

おおよそ以下のような記述で備考欄<textarea>を作成しました。
横方向は固定させ、縦方向のみリサイズ可としました。

さらにmin-height と max-height で高さを制限しました。

最小値(min-height)の時には備考という文字(label)は textarea のちょうど真横に来る
ようにpaddingなどで位置を調整したのですが、最大値(max-height)までリサイズすると
ラベルが添付画像のように下の方にズレてしまいます。

textareaボックスの左上に固定、もしくは高さに合わせてボックスの真横にくっついてくる
ようにするにはどのように記述したら良いのでしょうか？

わかる方がいらっしゃいましたら教えてください。よろしくお願いします。

（HTML）

<div>
<label for="remark">
備考:
</label>
<textarea id="remark"></textarea>
</div>

(CSS)
textarea#remark {

width: 400px;
resize: vertical;
min-height: 50px;
max-height: 120px;
border-radius: 0.5em;

}

回答No.1

Proof4

Flexレイアウトを利用すれば容易に実現できます。

【HTML】
<div id="remark_wrapper">
<label for="remark">
備考:
</label>
<textarea id="remark"></textarea>
</div>

【CSS】
#remark_wrapper{
display: flex;
align-items: center; /* 高さに合わせてボックスの上下中央に配置 */
}
textarea#remark {
width: 400px;
resize: vertical;
min-height: 50px;
max-height: 120px;
border-radius: 0.5em;
}

textareaボックスの左上へ固定したい場合はalign-items: center;を消去してください。