Tailwind divide combine row with 2 column and 1 column

Question

How to achieve the below grid structure where one column section contains two row while other is multiple row column

tried somthing similar -

<div className="grid grid-cols-4 gap-2">
<div className="col-1 col-span-3 row-span-2  bg-green-400">hello</div>
<div className="col-2  bg-red-400"> the</div>
<div className="col-2  bg-blue-400">world</div>
</div>

Answer 1

After struggling for a while was able to achieve with the below code -

<div className="grid grid-cols-12 gap-2">
<div className="col-span-4 bg-red-400"> the</div>
<div className="col-span-4 row-start-2 bg-blue-400">world</div>
<div className=" col-span-8 row-span-2 row-start-1 row-end-3  bg-green-400">hello</div>
</div>