Here is a card component example:
<div
name="card container"
class="flex max-w-[25vw] flex-grow flex-col gap-3 rounded-xl border-2 border-green-600 transition-all duration-500 hover:scale-105"
>
<div name="image" class="flex h-[30vh] justify-center p-2 align-middle">
<img :src="getImageUrl()" :alt="imageDesc" />
</div>
<div
name="web architecture"
class="ml-3 w-fit rounded-3xl border-2 px-3 font-semibold"
:class="templateColor"
>
{{ webArchitecture }}
</div>
<div
name="card title"
class="flex-grow-1 border-2 border-blue-600 text-center text-xl font-bold"
>
{{ title }}
</div>
<div
name="card description"
class="flex h-fit justify-center overflow-y-auto border-2 border-red-600 p-4 text-center align-middle font-semibold text-gray-500"
>
{{ description }}
</div>
</div>
I then imported this card component into another container and used it:
<div
class="flex-0 container mx-auto mt-5 flex items-stretch justify-center gap-5 rounded-xl border-2 border-purple-600 p-5"
... multiple cards components...
</div>
The issue I am facing is that the cards do not have the same height. I have tried using flex-grow, overflow-y-auto, and other methods but nothing seems to work. Does anyone have any suggestions on how to make them equal in height?