height adjust of the content based on additional length of data - html

Question

I have list of tools in a 2x2 grid layout, the problem here is sometimes the tool image and tool name have either more height based on there image and name. So i have read that we should not keep the image width and height. What i want to achieve is that if the second column has more content it should align exactly same. So that my Add to Cart will align exactly same
.tools-list-container {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(min(136px, 100%), 1fr));
}
.tool-card-container {
background: #ffffff;
border: 1px solid #e1e4e7;
box-sizing: border-box;
border-radius: 8px;
padding: 12px;
}
.tool-image-container img {
width: 100%;
object-fit: cover;
height: 80px; // to adjust the height
}
.tool-name {
font-weight: 600;
font-size: 14px;
line-height: 20px;
margin-top: 20px;
}
.tool-description{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
margin-top: 2px;
}
.tool-amount-action-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 6px;
}
.tool-our-price {
font-weight: 600;
font-size: 19px;
line-height: 20px;
}
.tool-mrp {
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 20px;
}
.button-wrapper {
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: grey;
border: 1px solid grey;
cursor: pointer;
}
<div class="tools-list-container">
<div class="tool-card-container">
<div class="tool-image-container"><img src="https://picsum.photos/id/237/200/300" alt="Tool one"></div>
<div class="tool-name">Test Tool 1</div>
<div class="tool-description">1.25 kg of weight</div>
<div class="tool-amount-action-container">
<div class="tool-amount-container"><span class="tool-our-price">₹9</span><span class="tool-mrp">10</span></div>
<div class="action-container">
<div class="button-wrapper" style="padding: 7px 11px; font-size: 15px;">
<div class="button-text">Add to cart</div>
</div>
</div>
</div>
</div>
<div class="tool-card-container">
<div class="tool-image-container"><img src="https://picsum.photos/id/237/200/400" alt="Tool two"></div>
<div class="tool-name">Test Tool more detail name 2</div>
<div class="tool-description">1 kg of weight</div>
<div class="tool-amount-action-container">
<div class="tool-amount-container"><span class="tool-our-price">₹9</span><span class="tool-mrp">10</span></div>
<div class="action-container">
<div class="button-wrapper" style="padding: 7px 11px; font-size: 15px;">
<div class="button-text">Add to cart</div>
</div>
</div>
</div>
</div>
</div>
If i add below snippet then i will be able to control the height of the image
.tool-image-container img {
width: 100%;
object-fit: cover;
height: 80px;
}
but i don't know inside a grid how can i control the text height so if tool name is more than also it the content of two column align exactly same. so that the Add to cart will be same across every row
Any help is appreciated