Flexbox column vertical space-between not working

Question

How do I space-between vertical content? In the example, in the third column I'm expecting to be able to justify-content-between red and black divs WITHOUT specifying the height (currently it's here to make an example). Can't I do it without it since we already have a max-height from the middle col?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center">
  <div class="col-auto">
    <div>asdqwd</div>
  </div>
  <div class="col d-flex flex-column text-center">
    <div>rgergre</div>
    <div>vs</div>
    <div>rger ergerg</div>
  </div>
  <div class="col-auto d-flex flex-column justify-content-between" style="height:72px">
    <div style="height:20px;width:20px;background:red">ewf</div>
    <div style="height:20px;width:20px;background:black">qwd</div>
  </div>
</div>

https://jsfiddle.net/xmkrt21j/2/

Answer 1

Align-items center is throwing it off at .d-flex align-items-center

Two options:

1) Add align-self: stretch to the third flexed block.

2) Remove align-items: center and add align-self: center to the first block.