0
Iは、可変高さを有することができる（ブートストラップV4）行内側（ブートストラップV4）COL内部DIVを整列しようとしています。ここで簡単に参照のためcodepenある - https://codepen.io/ajmajma/pen/veNRdY整列単一のdiv
とコード自体：
HTML
<div class="basket-reccomendations">
<div class="basket-reccomendations__title col-12"><span>Know what else is great?</span></div>
<div class="basket-reccomendations__body col-12">
<div class="row">
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Name</div>
<div class="singleReccomendation__variant">variant</div>
<div class="singleReccomendation__price">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Name</div>
<div class="singleReccomendation__variant">Charcoal</div>
<div class="singleReccomendation__price">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Name</div>
<div class="singleReccomendation__price no-variant">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Extra long name that might skew the row height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies tellus massa, quis fringilla nunc aliquet quis. Etiam non bibendum lacus. Nullam at nibh cursus, convallis tellus id, rhoncus tellus. Mauris interdum justo nec ex interdum gravida. In hac habitasse platea dictumst. Cras vitae ex ligula. </div>
<div class="singleReccomendation__variant">variant</div>
<div class="singleReccomendation__price">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
</div>
</div>
</div>
CSS（SCSS）
.basket-reccomendations {
background: #fff;
padding: 1rem;
margin-top: 2.5rem;
&__title {
}
&__body {
.singleReccomendation {
text-decoration: none;
&__wrapper {
max-width: 20rem;
position: relative;
margin: 0 auto;
}
&__img {
width: 15rem;
height: 15rem;
}
&__brand {
}
&__name {
}
&__variant {
}
&__price {
color: #000000;
}
&__addToBag {
text-transform: none;
margin-bottom: 2rem;
}
}
}
}
あなたが見ればdivsの2行目 - 高さに余分なテキストがあり、私が試していること達成するためには、すべての悪いbtnsを追加するのは、そのsingleReccomendation divの一番下に揃えます。
私はバッグに入れるに位置singleReccomendation上の相対とposition: absolute, bottom: 0を設定しようとしたが、それは動作していないようです。私はブートストラップv4でflexを使用していますが、この問題を解決する最良の方法は何だろうと思いますか？ありがとう！