Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

Tailwind CSS Grid Card doesn't fill space vertically

$
0
0

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:

Image view

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>

Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>