'The Grid container on the right is the same height as the left one

I am trying to work with Tailwind CSS grids and I am facing this issue where the container on the right the same height as the left one. It should be as high as the content inside it.

https://play.tailwindcss.com/tAylernG5k

Am I missing something here?

tailwind-css

Solution 1:^[1]

You can use flex to align the boxes and h-full to have the height of the blocks as per the content inside it.

Below is the corrected example shared by you

<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
  <div class="flex flezx-row gap-4 w-full">
    <div class="p-6 bg-red-300 rounded-xl h-full w-1/2">
      <p>Helllo</p>
      <p>Helllo</p>
      <p>Helllo</p>
      <p>Helllo</p>
      <p>Helllo</p>
      <p>Helllo</p>
    </div>
    <div class="p-6 bg-red-300 rounded-xl h-full w-1/2">
      <p>Helllo</p>
      <p>Helllo</p>

    </div>
  </div>
</div>

Ignore the warning

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mohit Maroliya B17CS036

'The Grid container on the right is the same height as the left one

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]