I am struggling to re-create a layout, trying to do this in flexbox but stumped, here is an image of what I want to achieve:
But here is what I end up with
:
Note that empty space is actually empty, the top left item does not take up that space, no element exists there.
I have flex on display with align-items = 'flex-start' and each box has a flex basis of around 45%.
Note that I tried to hack by making the bottom left item position = 'relative' and do a top = -value. However this isn't responsive enough, it works on one size but breaks as you shrink the screen. I tried to adjust by having different top negative values at 4 different break points but still there are intermediate breaks that it doesn't work on.
Perhaps there is a flexbox setting I am missing that could work, perhaps I can't do this with flexbox? Or maybe I need a 'calc' value that can accurately estimate how much -negative top value I need based on screen size or viewport (which I have no clue how to do...).
I need this layout to be responsive up to typical SM screen size and then it can stack on mobile screens which is easier for me to handle.
