How to show 2 Boxes in front of one Tall Box using MUI Stack or flex Box

I am working on a dashboard layout where widgets can be of different size.I am using MUI Stack. I have a requirement where if I add a 1 tall widget (double the height of small widget) and 2 small widgets, I should show them side by side as shown in below image and this is dynamic we can add n no of widgets having combination of small and tall and it should adjust all side by side without leaving any empty spaceImage may be NSFW.
Clik here to view.

<Stack direction="row" spacing={2}><Box sx={{ marginTop: 1 }} flexGrow={1}> 1 </Box><Box sx={{ marginTop: 1 }} flexGrow={1}> 2 </Box><Box sx={{ marginTop: 1 }} flexGrow={1}> 3</Box></Stack>