Как прижать блок к низу bootstrap4 flex?

Question

[di]

есть допустим вот такая верстка

<div class="container">
    <div class="row">
      <div class="col-4 align-items-stretch">
        <div class="product">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
          <div> Down </div>
        </div>
      </div>
       <div class="col-4">
        <div class="product">
          Test
        </div>
        <div> Down </div>
      </div>
       <div class="col-4">
        <div class="product">
          Test
        </div>
        <div> Down </div>
      </div>
    </div>
</div>

Я хочу чтоб div с product занимал все свободное пространство по высоте, а div в котором down был прижат к низу. Никак не могу это заставить работать.

Вот пример моих мучений - https://codepen.io/delgus/pen/wvMqvER

Answer 1

[FinGanapre]

Например так. Доки. И немного о флексах

<div class="container">
    <div class="row">
      <div class="col-4 d-flex flex-column">
        <div class="flex-grow-1">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
          <div> Down </div>
        </div>
      </div>
       <div class="col-4 d-flex flex-column">
        <div class="flex-grow-1">
          Test
        </div>
        <div> Down </div>
      </div>
       <div class="col-4 d-flex flex-column">
        <div class="flex-grow-1">
          Test
        </div>
        <div>Down</div>
      </div>
    </div>
</div>