Layout Recipe

Vertically Center Anything with Tailwind items-center

The old 'vertical-align' property never worked the way anyone expected. In flexbox, vertical centering inside a row is one utility: 'items-center' on the parent aligns every child to the vertical middle of the tallest item. This is the fix for icons that sit too high next to text, badges that hug the top of a list row, and avatars that refuse to line up with usernames. Children keep their natural left-packed order because 'justify-start' stays untouched.

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.