How to push a block to the bottom of bootstrap4 flex?

Question

css

there is, let's say, such a layout

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

I want the div with product to take up all the free space in height, and the div in which down is pressed to the bottom. I can't get it to work at all.

Here is an example of my torment - https://codepen.io/delgus/pen/wvMqvER

Answer 1

For example so. Docks . And a little about flex

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