How to Set All Grids Height Based on Image Height - html

Question

How can I set all grid heights to the image height?
■Structure
I have 3 contents displayed using Grid (.title, .image, and .search-container). The .search-container includes a search bar connected to an API and would display the results inside.
■What I want to do
For the smaller screen size, first, before searching, I want to have the 3 grids the same height as the image inside .image, and after searching, I want to have the first 2 grids remain the same and the .search-container height changed based on how long the search results are.
■Problem
Before searching, the .search-container is smaller than the min height set (minmax(210px, auto)) & smaller than the .title and .image
After searching, the .search-container is stretched to fit all results but the .title and .image change too and get smaller. How can I solve this?
I want to set the grid heights dynamically without setting 210px like here grid-template-rows: repeat(2, 1fr) minmax(210px, auto);. How can I do that?
.container {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 50vh auto;
}
.title {
grid-column: 1;
grid-row: 1;
}
.image {
grid-column: 2;
grid-row: 1;
height: 50vh;
}
.image img {
width: 100%;
}
.search-container {
grid-column: span 2;
grid-row: 2;
min-height: 50vh;
}
#media only screen and (max-width: 820px) {
.container {
height: auto;
min-height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr) minmax(210px, auto);
}
.title {
grid-column: 1;
grid-row: 1;
}
.image {
grid-column: 1;
grid-row: 2;
height: auto;
width: auto;
}
.image img {
height: 100%;
width: 100vw;
}
.search-container {
grid-row: 3;
grid-column: 1;
min-height: 0;
}
}