CSS technique fixes icon misalignment with multi-line text labels

A web design tutorial addresses a common flexbox alignment issue: when a list item's icon sits beside wrapping text, using align-items: center leaves the icon vertically centered against the whole text block instead of matching the first line. The author demonstrates using align-items: start combined with a small transform: translateY offset on the icon to correct the visual gap caused by line-height spacing above the text glyphs.