Alignment of flex items

Issue

I have a wrapper which is display:flex and equally spaces the items horizontally. Those items have display:flex also but are flex-direction:column these are basically an image and a span wrapped in a button. What is happening is when the span the breaks onto 2 lines it misaligning the top of the images so they look out of line, is there a way around this?

You can see the problem here

Solution

You've got align-items: center on your main .bottle-refill-options container, which is vertically centering everything.

Change this to align-items: flex-start; and all your items will vertically center along the top, giving the look (i think) you want

Answered By - Rhyan-WoodsAndWalker