ラジオボタン

これちょっとよく分からないな。説明として表示される "Drafts are〜" の方の <div> はclass="hidden peer-checked/draft:block" でもう片方が class="hidden peer-checked/published:block" なのだが、デフォルトで hidden が効くのは分かる、だが peer-checked/published:block で表示されるのがよく分からない。

→ 分かった hidden = display: none; で block = display: block; だから。

hidden はタグのステートと勘違いした。

単純にブロック要素である <div> で囲めば縦並びになる。が、上の例のヒントテキストが出てこなくなる。

それぞれを同じ div に入れると・・・id とかちゃんとユニーク名に変えているのに挙動がおかしくなった・・・。

まあ、ラベルの後ろにヒントテキストが出てくるのがベター。

それぞれを同じ div に入れてヒントテキストの div のクラスを peer-checked/draft_c:inline という風に inline にするだけで行けた。

さらにインデントが揃うのがベターではあるが。

ヒントテキストのインデントを合わせる為に grid を試してみる。

ヒントテキストのインデントは揃うが、gird だと各カラムの width がコントロールできないのでキビシイ。あと Chrome だとなぜかラジオボタンが大きく表示される。

ヒントテキストのインデントを合わせる為に flex を試してみる。

flex の方がすんなり行く。