【form】labelとtextareaの位置を調整する方法


こんちには、すずです。

フォーム作成中に、labelとtextareaの位置がずれてしまうという現象がありました。
これの解決方法についてまとめます。

早速ご覧ください!

【form】labelとtextareaの位置を調整する方法

問題

textareaのlabelが、textareaの末尾に配置されてしまう。
labelをtextareaの先頭に配置したい。

<div class="form-item">
  <label for="remarks_note">備考</label>
  <textarea id="remarks_note" name="remarks_note" value=""></textarea>
</div>
.form-item {
    margin-bottom: 5px;
}


.form-area label {
    display: inline-block;
    width: 140px;
    text-align: left;
}

解決法