Segment at the end of column

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<div class="ui  segment">
  <div class="ui divided grid container">
    <div class="three column stretched row">
      <div class="column">
      <div class="segment-wrapper">
        <div class="content">
        
        </div>
        <div class="ui bottom segment">
        </div>
        </div>
      </div>
      <div class="column">
          <div class="segment-wrapper">
        <div class="content">
        There is some content here that is changing the height of all the columns
        </div>
        <div class="ui bottom segment">
        </div>
        </div>
      </div>
     
      <div class="column">
         <div class="segment-wrapper">
        <div class="content">
        
        </div>
        <div class="ui bottom segment">
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.segment-wrapper {
  background-color: #DDD;
  /* min-height: 400px; */
  display: flex;
  flex-direction: column;
}

.content {
    flex: 1;
    background-color: skyblue;
}

.ui.bottom.segment {
  margin-top: 10;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}