I’m working on a grid layout that displays recent articles. Each article has an image and a short description. I want the image to be taller than the content text block, and still maintain responsiveness across different screen sizes.

Here’s the relevant part of my code using tailwind css and next js:

<div className="grid gap-2">
    {articles.recentArticles.map((article, index) => (
        <Link className="block rounded-lg overflow-hidden" key={index} href={`/article/${article.urlSlug}`}>
            <div className="p-4 flex items-center justify-center"> { }
                <Image
                    src={article.image.url}
                    alt={article.title}
                    width={150}
                    height={500} className="h-500 w-150 rounded-md mr-4"
                />

                <div className="space-y-2 flex-grow">
                    <h2 className="text-2xl font-bold mb-2">{article.title}</h2>
                    <p className="text-gray-600 mb-4 line-clamp-2">{article.description}</p>
                    <div className="flex items-center justify-between">
                        <p className="text-gray-600">{formatDate(article.createdAt)}</p>
                    </div>
                </div>
            </div>


        </Link>
    ))}
</div>

What i actually want is something similar to this

I’ve tried Setting a fixed height for the image element, but nothing works.

I’m hoping to achieve a responsive layout where the image is always taller than the content text block.