Top-align alert icon in yellow alerts banner

[richardxia]

While our designers were looking at #1241, they noticed that the alert icon (the exclamation point inside a circle) is middle-aligned, but middle alignment looks kind of bad on mobile, especially if the text is large.

They're suggesting that we top-align the icon, as shown in #1241. Also, in a video chat, we specifically said that it would be ideal to align the point in the exclamation point to the baseline of the first line of text. The baseline is the line that most letters sit on, not including descenders such as the tails in j, p, and q. That might be tricky from a CSS perspective, but at least changing it to a top alignment would be better than the current middle alignment.

Here's a pretty thorough article on vertical alignment in CSS, in case it is useful for understanding how baseline alignment works: https://christopheraue.net/design/vertical-align

Current, middle alignment

Requested change in this ticket, baseline alignment