Same size on gallery cards in TailwindCSS - html

Question

I have an image gallery in Tailwind CSS with React. It looks like this:
Each image component is defined life this:
<div className="flex items-center">
<div className="rounded overflow-hidden shadow-lg">
<img
className="w-full h-48 object-cover"
src={img}
loading="lazy"
alt={""}
/>
<div className="p-6">
<div className="flex items-baseline">
<div className="">{name}</div>
</div>
</div>
</div>
</div>
and it's loaded on this container:
<div className="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
{images.map(img => <ImageComponent ..../>)}
</div>
As you can see the descriptions make the cards longer than others. How can I have the cards in the same row the same size without cutting the word?
I'm using "tailwindcss": "1.4.6"

Answer 1

I've solved this before by putting the card contents in a flex-column and stretching the content area to fill the flex by giving it flex-1. For example:
<div className="rounded overflow-hidden shadow-lg">
<div className="flex flex-column">
<img
className="w-full h-48 object-cover"
src={img}
loading="lazy"
alt={""}
/>
<div className="flex-1 p-6">
<div className="">{name}</div>
</div>
</div>
</div>