Image max height equal to height of other row in css grid

Question

I have a grid with two columns and a row. In one cell I have an image that can grow and shrink, in the other, I have two inputs that make for a fixed height. If I resize the window the height of the image grows far beyond the height of the other row.

I am looking for a way to set the max height of the image to be equal to the height of the other cell so that it never grows bigger than the other column.

I have tried everything I could think of but I couldn't find any solution. If something in my question is not clear don't hesitate to leave a comment, I will more than apply to explain myself further. Thanks in advance !

I want to get rid of the space in yellow:

At the moment I am using tailwindcss. The code for the grid and its contents is the following:

<div class="grid grid-flow-col auto-rows-auto auto-cols-auto gap-5">
        <figure class="max-w-lg">
            <img
                class="max-w-full max-h-fit rounded-lg"
                src="https://avatars.githubusercontent.com/u/98087889?s=40&v=4"
                alt="image description"
            />
            <figcaption class="mt-2 text-sm text-center ">
                Avatar
            </figcaption>
        </figure>
        <div class="space-y-4">
            <div>
                <label class="block mb-2 ">Input</label>
                <input
                    class=" block w-full p-2.5 "
                />
            </div>
            <div>
                <label class="block mb-2 ">Input</label>
                <input
                class=" block w-full p-2.5 "
                />
            </div>
        </div>
    </div>

Answer 1

In your <img> tags you can just set the max width of the image to a set value:

<img
  class="max-w-lg max-h-2 rounded-lg"
  src=.....
  alt=....
/>

This would allow you to change the size of the image but it would stop at a max specific value. You could then use the same max values for the input boxes. This would allow them to match.

Also, check Tailwindscss website for further information on how to use these values.