While working on a project, I paused to style an icon + text. When the text is short, the icon is vertically centered. If the text wraps, the icon is aligned with the first line.
https://ishadeed.com/article/aligning-list-icons/
This is a result of using lh, aspect-ratio, height: auto, flexbox and more.
Sep 15, 2026, 7:24 PM@shadeed9 it feels so obvious when you lay it out like this!
@reed yep! it's one of those examples that feels simple, but when you unfold it, many details are there.
Sep 15, 2026, 8:11 PM@nicod thanks a lot!
@shadeed9 Would a subgrid work for your use case?
https://codepen.io/editor/rauschma/pen/01a0aae8-7737-707e-8bfd-1cc478194390
@rauschma Nice idea! But the icon is still not aligned though, which goes back to the initial problem I have.
@shadeed9 Ah, interesting! I *wanted* it to be aligned with/on the baseline but centering relative to the cap height makes a lot of sense, too.