I'm trying to draw two cards inside a section in my page. Every card has different height but I need that both of them have the same height and fill the orange space shown in this image:
This is my code:
<div class="flex flex-col md:flex-row justify-between items-center mt-5">
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 p-3">
<div class="grid h-max">
<div class="col-span-1 my-auto">
<v-card class="text-center py-4" rounded="xl" elevation="4" color="white">
<v-icon size="40" class="text-secondary">
<i class="fas fa-bullseye"></i>
</v-icon>
<v-card-text class="text-h5 text-over text-primary">Misión</v-card-text>
</v-card>
</div>
</div>
<div class="col-span-2 my-auto">
<v-card class="text-justify pa-1" rounded="xl" elevation="4" color="white">
<v-card-text class="text-h6 text-over text-secondary px-8 py-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum aliquid rem fugiat! Molestias quis ad quasi modi dolor, quibusdam placeat fugit veritatis quisquam doloremque laboriosam maxime, ratione inventore iure tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, placeat est distinctio nemo quo voluptatum fuga iure odio vero possimus iusto numquam omnis. Repudiandae quos molestias nisi magnam voluptatibus harum?</v-card-text>
</v-card>
</div>
</div>
</div>
The problem is: They don’t have equal height, and you want both to match in height and fill the orange background evenly.
The solution: Use flex and items-stretch to make all the columns stretch to the same height. Use flex inside each column to make the card expand vertically. Add w-full to make the card fill the full width of its column.
<div class="flex flex-col md:flex-row justify-between items-center mt-5">
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 p-3 items-stretch"> <!-- makes columns stretch same height -->
<!-- First card -->
<div class="col-span-1 flex"> <!-- make the wrapper a flex box -->
<v-card class="text-center py-4 w-full" rounded="xl" elevation="4" color="white">
<v-icon size="40" class="text-secondary">
<i class="fas fa-bullseye"></i>
</v-icon>
<v-card-text class="text-h5 text-over text-primary">Misión</v-card-text>
</v-card>
</div>
<!-- Second card -->
<div class="col-span-2 flex">
<v-card class="text-justify pa-1 w-full" rounded="xl" elevation="4" color="white">
<v-card-text class="text-h6 text-over text-secondary px-8 py-4">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum aliquid rem fugiat! Molestias quis ad quasi modi dolor, quibusdam placeat fugit veritatis quisquam doloremque laboriosam maxime, ratione inventore iure tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, placeat est distinctio nemo quo voluptatum fuga iure odio vero possimus iusto numquam omnis. Repudiandae quos molestias nisi magnam voluptatibus harum?
</v-card-text>
</v-card>
</div>
</div>
</div>