Better Icon and Label Alignment

God, this was so complicated to understand just to get an icon aligned properly with multi-line text. Someone needs to re-design CSS from scratch. Its has become a rube goldberg machine of complexity.

There's new CSS capabilities [0] that can help solve this problem better now via alignment-baseline [1] and text-box-trim [2].

[0] https://www.w3.org/TR/css-inline-3/#leading-trim

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

Recently found the lh unit approach. It’s elegant for centering icons along the first line in dynamic, sometimes wrapping text.