How can I achieve this two-column layout with Tailwind? - html

Question

I need to create three divs positioned like below:
Green div should be 75% width and red divs should have 25% width and 50% of height, placed in column. And everything should be responsive.
Right now I have something like here:
<div className="w-full">
<div className="w-3/4 float-left">
</div>
<div className="w-1/4 float-right">
<div id="red-one"></div>
<div id="red-two"></div>
</div>
</div>
but it not this same as i expected :/
can someone tell me how to do this?
thanks for any help!

Answer 1

Oldish option (see nowdays below that one) :you can use and mix the table-layout display and regular block display via tailwind class
Possible example
/* your scrennshot's borders */
div div {border:solid red;}
div.table-cell{border-color:green}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="table w-full p-2">
<div class="table-cell w-3/4 p-2">hello</div>
<div class="p-2 ml-2"> the</div>
<div class="p-2 mt-2 ml-2">world</div>
</div>
any draw back ?
yes, if both content of the rights side div are shorter than the content of the left one, it wont fill the column
nowdays option: grid
Advised example:
div div {border:solid red;}
div div:first-child{border-color:green}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 p-2 grid-cols-2 gap-2">
<div class="col-1 col-span-3 row-span-2 p-2">hello</div>
<div class="col-2 p-2"> the</div>
<div class="col-2 p-2">world</div>
</div>
drawbacks ? none, but you will have to create your own class to set the grid-template-colums property to match your columns's widths as commented by #bqardi
Container: grid grid-cols-4 and green div: col-span-3 row-span-2? No need to create own class