How do I keep items within order and align despite sibling heigh

[stychu]

I want to make a layout for 3 different breakpoints.

Default
A |
B |
C |

+1 Breakpoint
A | C
B |

+1 Breakpoint

A | B | C

How Can I make it so that B is always as close as possible to A no matter the C height.

As you can see in this example I added -mt to adjust the B close to A but if C dynamically changes height then -mt no longer fits as close as possible and there is a gap. Is there any automatic way to achieve B auto span up to A ??

https://play.tailwindcss.com/9y1z48Kaai

[wongjn]

Explicitly set the grid row sizing, while having C span both rows: https://play.tailwindcss.com/QI1HnyTINR

[stychu]

Awesome ! Thats what I was looking for. Thank you <3