How to place labels like in the picture using flex?

Question

Layout

I need to place labels like in the picture:



This is what I get:



My code is a link to a CodePen.

Answer 1

No need to torture yourself with flex. Flex is handy when you place something horizontally, vertically one-dimensionally.
You see a "complex" grid - make it a grid. All your markup is laid out with grid-temlate-column, rows, areas, and width settings.