Currently, I am dealing with a grid that consists of two columns and one row. One cell contains an image that can resize dynamically, while the other cell contains two input fields with fixed height. The issue arises when resizing the window, as the height of the image exceeds the height of the other row significantly.
I am seeking a solution to set the maximum height of the image equal to the height of the other cell, ensuring it never grows larger than the adjacent column.
Despite my efforts, I haven't been able to find a suitable fix for this problem. If any part of my explanation is unclear, please feel free to ask, and I will gladly provide further clarification. Thank you in advance!
I specifically want to eliminate the space highlighted in yellow:
My current setup involves using tailwindcss. Below is the code snippet for the grid and its contents:
<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>