Order Summary Component

2 problems so far:

I didn't know how to group the "Music Icon" and "Annual Plan" together while having the whole row justified and vertically centered at the same time.

I used these rules to vertically centre my content in the body: body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

The problem with this is that when I make my browser screen really short, let's say less than 500px, the top of the content starts to cut off and it won't scroll up.

So I fixed it by creating conditional CSS where I monitor the height of the screen. This is not elegant and I feel deeply ashamed :) Any advice on how to actually stick the content to the top of the screen, when the viewing height becomes too small, with the possibility to scroll, would be much appreciated.