ラジオボタンで改行が発生するとまわりこんでしまう現象への対処

ラジオボタンで改行されると、ポッチの下に文字が回り込んでしまう。 これだとかっこよくないので、以下で対応する。

flexboxをここで適用すると、要素が横並びになるので、ポッチの領域に侵入してくることはない。

margin-topを付けるのは、ラジオボタンの位置を合わせるためにつける。 padding-left:3pxは、ポッチと文字の間隔が狭いので、あけるため。

<div class="display:flex;">
  <input type="radio" value="xxx" style="margin-top:5px; />
  <div style="padding-left:3px;>ここは長いテキスト</div>
</div>