Summer Sale! All accounts are 50% off this week.
I need to relocate(Vertically) the red box and the white box to the bottom of the green box. How can i do this?
I tried including flex and items-end but couldn't figure it out (Didn't include here)
https://play.tailwindcss.com/BiTu0woXJi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid grid-cols-2 boder-2 border-black space-x-4">
<div class="p-4 bg-yellow-200 border-2 border-black">
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</div>
<div class="p-4 bg-green-200 border-2 border-black">
<div class="grid grid-cols-4 border-2 border-black"><!--first row-->
<button class="border-2 border-black bg-red-400 px-4 py-2">test</button>
<button class="col-start-3 border-2 bg-white border-black px-4 py-2">test</button>
</div>
<div>
<div class="grid grid-cols-4 border-2 border-black"><!--second row-->
<button class="border-2 border-black bg-red-400 px-4 py-2">test</button>
<button class="col-start-3 border-2 bg-white border-black px-4 py-2">test</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here is one way to accomplish it by wrapping all of the rows in another div.
https://play.tailwindcss.com/F2IOGHUvdf
And here's how to do it without a wrapping div. Instead of theitems-end class, you should use the justify-end class when using the flex direction of column.
How about this?
@computerfr33k @jeffreyway Thank you for your answers. Actually i need the first row to be in the same position(Couldn't mention it in the first place, sorry about that)
Only the second row should vertically move to the bottom
Like this? https://play.tailwindcss.com/B5vltFoCHn
@computerfr33k Exactly. Thank you. I will look at it deeply.
Please or to participate in this conversation.