How to align prices and product buttons with one- and two-line titles (content inside flex items)?

Question

css

All similar questions in Google back in 2015-2016, when flex was just gaining momentum. And the answers are usually fixed height. But I don't think they usually do that on flex.
The problem is the same - with a different length of the title, the buttons and the price dance. And I want to stick everything under the heading to the bottom of the parent element. They suggested a way to make "parent" absolute, but it only worked until I did some padding.
I wanted to make it like flex-direction: column, justify-content: space-around, but these are already flex elements, and will not be applied inside them. I made li-shki for clarity with frames, they are the same in height, but already the "wrap-loop-item" is not uniform. wrap-loop-content needs to stick to the bottom.
Probably this is elementary things, but I do not know how to solve it, please help. Code skeleton without dynamics. Bootstrap 4 is involved.

<ul class="products row columns-4">
 	<li class="align-content-center new_products_grid">
 		<div class="wrap-loop-item">
 			<div class="wrap-loop-img-item">
 				<a href=""><img src="" alt=""></a>
 			</div>
 			<h2 class="woocommerce-loop-product__title"></h2>
 			<div class="wrap-loop-content">
 			    <div class="star-rating"></div> 				
                            <span class="price"></span>
                            <a href="" class="button add_to_cart_button atcbtn"></a>
 		   </div>
 		</div>
 	</li>	
</ul>

* {
  outline: 0 !important;
}
html,body{
    width:100%;height:100%;
}
body{
  font-family: 'Montserrat', sans-serif !important;
  color: #151515;
  font-size: 18px !important;
    display: flex;
    flex-direction: column;   
}

a, {
  text-decoration: none;
  color: #151515;
}
a:hover {
  text-decoration: none!important;
  color: #ff5151 !important;	
}
ul{
  margin:0px;
  padding: 0px;
}

li{
  list-style: none;
  color: #151515;
}
img{
  max-width: 100%;
}
.new_products_grid {
    padding: 8px;
    width: 25%;
}
.wrap-loop-item {
    padding: 3%;
}
.wrap-loop-img-item {
    position: relative;
}
img {
    max-width: 100%;
}
.onsale {
    position: absolute;
    background: red;
    padding: 10px 20px;
    color: white;
    font-size: 0.9em;
    left: -10%;
    top: -5%;
    border-radius: 100%;
}
.woocommerce-loop-product__title {
    font-size: 1.2rem;
    margin-top: 15px;
}
.star-rating {
    overflow: hidden;
    position: relative;
    height: 1.618em;
    line-height: 1.618;
    font-size: 1em;
    width: 5.3em;
    font-family: 'star';
    font-weight: 400;
}
.star-rating:before {
    content: "\53\53\53\53\53";
    opacity: .25;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}
.add_to_cart_button, .add_to_cart_button:hover, .price_slider_amount>button {
    display: block;
    background: red;
    color: white!important;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 1.1rem;
}

Answer 1

min-heightHave you tried headers?
See a similar implementation example: https://74.mkelectro.rf/catalog/kabel-vvg