[HTML][CSS]label付きの入力フィールドとチェックボックスの高さを同じ高さにしたい

Question

聞きたいこと

下の画像のように、ラベル付きのテキスト入力フィールドとチェックボックスを並べた入力フォームを作りたいと思っています。
現状、チェックボックスがラベル付きのテキストフィールドのテキスト入力部分の少し上側に位置していますが、入力フィールドのと同じ高さにしたいと思っています。

今考えられる自分の方法としては、

• チェックボックスの上側にマージンを設定する

くらいです。
ただマージンを設定した場合、テキストフィールドの高さが今後変更された場合、マージンも同様に修正することになるのがちょっと手間かなぁと思ってます。
理想は下のようなフレックスボックスのように自動的に高さを調整してくれればいいなと思っているのですが、そのような方法があれば教えてほしいです。

display: flex;
align-items: 'center'

ソースコード

https://codesandbox.io/s/zealous-lalande-fdglf?file=/src/pages/index.tsx

Comments

[m.ts10806]

回答依頼いただきましたが、可能なら質問本文にコードを提示してもらえたらと思います。おさまらないくらい長いなら仕方ないですが、現象を確認できる最小限のコードならそこまでにならなそうに思います。

Answer 1

align-items: end;