Выравнивание цены и кнопки товаров с одно- и дву-строчными заголовками(содержимого внутри flex-элементов), как сделать?

Question

trenton @trenton

Выравнивание цены и кнопки товаров с одно- и дву-строчными заголовками(содержимого внутри flex-элементов), как сделать?

Все подобные вопросы в гугле еще 2015-2016 года, когда флексы еще только набирали оборот. И ответы обычно - фиксированная высота. Но мне кажется на флексах так обычно не делают.
Проблема та же - при разной длине заголовка кнопки и цена пляшут. А хочется прилепить все, что под заголовком к низу родительского элемента. Советовали способ сделать "родителя" абсолютом, но помогло только пока я не сделал padding-и.
Хотел сделать типа flex-direction:column, justify-content: space-around, но это уже флекс-элементы, и внутри них не применится. li-шки для наглядности сделал с рамками, они одинаковые по высоте, а вот уже "wrap-loop-item" не равномерные. wrap-loop-content нужно прилепить к низу.
Наверно это элементарные вещи, но я не знаю как решается, помогите пожалуйста. Скелет кода без динамики. Bootstrap 4 задействован.

<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;
}