<label><input>|後者の先頭を揃えたい

質問

いくつかの「label要素[input要素]」を、リスト要素等を使って単純な縦並びにするとします。すると、label要素の文字数が異なるため、input要素の先頭が揃いません。この状態から先頭を揃えた表示に変更したい場合、適切な改善方法(html要素変更やcss指定)を教えていただけませんか。
よろしくお願いします。

回答No.1

Nobu-W

https://code-kitchen.dev/html/label/
疑問に感じられてる点と、その他にも少し載ってますが、参考になり
ませんか？

お礼

補足内容のflex-wrap:wrap;は存在しません。失礼しました。

補足

現状、Blockによる方法は再現できていません。その代わりに、適切かどうかはわかりませんが、Flexboxを使ってひとまず目標通りの表示に成功しました。以下はあくまで試用中のものなので、適切性には欠く記述があるかもしれません。また、使用の際は、対応状況を一応確認した方が良いかもしれないかもしれない......っぽいです(この点はまだ十分に確認していません)。
html
<ul class = "list_a">
<li><label for "name">test</label><div class ="input_a"><input type="text" id="name" size="10"></input></li>
</ul>
css
.list_a li {display: flex; justify-content: space-between; flex-wrap:wrap;}
.list_a label{background-color: blue; width:30%;}
.input_a {background-color: red; width:70%;}
※background-colorは範囲の確認用に付けているだけです。