料金表のレイアウト相談

真ん中のプランを選ばせるときに効くのは、比較のしやすさを崩さずに、1枚だけ目立たせることです。要点は3つあります。

1. 推奨の印は1枚だけ。複数に付けると推奨という意味が消えます。
2. 行の高さを揃える。機能の行がずれると、比較の視線が途切れます。
3. 年額と月額の切り替えは表の上に。下に置くと、切り替えたことに気づかれません。

カードの高さを揃えるだけなら、CSS はこれで足ります。

.plans { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.plan  { display: flex; flex-direction: column; }
.plan .cta { margin-top: auto; }