I have a simple 2 column grid. I want the first column to control the height. So if the second columns content height is more that the first the overflow will be hidden.

Example. Here, the height in the second column should never be greater than the height of the image in the first column. Any overflow in the second column should be hidden. How can I do this with tailwind?

<div class="grid grid-cols-2">
            <div class="bg-red-700">
                <img class="object-contain w-36 sm:w-full" src="https://images.unsplash.com/photo-1520333789090-1afc82db536a" alt="" />
            </div>

            <div class="bg-green-500 p-2">
                @for ($count = 0; $count < 10; $count++)
                    <div class="grid grid-cols-8 my-2">
                        <div class="col-span-2 sm:col-span-3 p-2 bg-gray-500">
                            <img class="object-contain w-36 sm:w-full" src="https://images.unsplash.com/photo-1520333789090-1afc82db536a" alt="" />
                        </div>
                        <div class="col-span-6 sm:col-span-5 bg-gray-500">
                            <div class="text-xs text-white pt-1 ml-2">
                                <h4 class="font-bold">Lorem ipsum</h4>
                                <p class="">Minus quidem ipsam quia iusto.</p>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>