F flexr.dev

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.

Live Preview

Current Layout:

items-baseline lines up letters, not boxes

When a row mixes font sizes — a large number beside a small label — items-center looks wrong because it centers each child's box, not its text. items-baseline aligns children on their text baselines instead, so every character sits on the same invisible line the way typography intends.

Tailwind 
<div class="flex items-baseline gap-1">
  <span class="text-4xl font-bold">$29</span>
  <span class="text-sm text-zinc-500">/month</span>
</div>
Vanilla CSS 
.price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

Where baseline alignment matters

Pricing tables ($29 next to /month), stat blocks (a big metric beside its unit), and headings with a trailing tag all read better on a shared baseline. Any time one piece of text is visibly larger than its neighbour, reach for items-baseline.

baseline vs center

Use items-center when children are similar in size or are non-text elements like icons and avatars — it centers their boxes. Use items-baseline specifically when the meaning comes from text sitting on one line. They are not interchangeable; the right choice depends on whether you are aligning boxes or letters.

Common mistakes

Using items-center for mixed-size text. Boxes center, but the letters look misaligned.

Applying items-baseline to icon rows. Icons have no text baseline and can align oddly; use items-center there.

Forgetting it is a parent utility. items-baseline goes on the flex container, not the text spans.

Frequently asked questions

How do I align text of different sizes on the same line in Tailwind?
Use items-baseline on the flex row so the characters sit on a shared baseline instead of centering each box.
What is the difference between items-baseline and items-center?
items-center centers each child's box; items-baseline aligns children on their text baselines. Use baseline for mixed-size text and center for similar-size or non-text elements.
Why does my price and its /month label look misaligned?
They are probably using items-center. Switch the row to items-baseline so the large price and small label share a baseline.

Popular Layout Guides