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>