How to arrange these elements like I want

Trying to arrange elements like the image in red:

Here’s a sandbox:

use flex box
Architecture like this:
1 div display flex.
2 div display flex, and each dev display flex.
if you want to center horizontally and vertically: justify-content: ‘center’, align-itens: ‘center’

Not sure I understand. You are saying to set all to display: flex? There’s no change if I do that.

example pen
This is the one approach. I guess you may have to use position: absolute on item 5 to align it properly.
I hope this help.

I got it. I just had to put two and three in their own div, plus other adjustments.


Thank you both anyway.

1 Like