Layout Recipe

Align Mixed-Size Text on One Baseline with Tailwind

When a row mixes font sizes — a large price next to '/month', or a big metric next to its unit — 'items-center' makes the text look misaligned because it centers boxes, not letters. 'items-baseline' aligns children on their text baselines instead, so every character sits on the same invisible line the way typography intends. This is the single most-missed utility in pricing tables and stat rows.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.