JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row parent">
    <div class="col-12 col-sm-7 left">
      <div class="row top">
        <div class="col">Top</div>
      </div>
      <div class="row bottom">
        <div class="col-sm-7 my-list-container">
          <ul class="list-group">
            <div class="list-group-item dummy-item">
              Dummy item
            </div>
            <div class="list-group-item dummy-item">
              Dummy item
            </div>
            <div class="list-group-item dummy-item">
              Dummy item
            </div>
          </ul>
        </div>
        <div class="col-sm-5 flex-end">
          This should be flex end
        </div>
      </div>
    </div>
    <div class="hidden-xs-down col-sm-5 right">
    </div>
  </div>
</div>

CSS

html,
body,
.container-fluid,
.parent {
  height: 100%;
}

.dummy-item {
  height: 300px;
}

.left {
  display: flex;
  flex-direction: column;
}

.left .top {
  flex-shrink: 0;
}
.left .bottom {
  flex-shrink: 1;
  flex-basis: 100%;  
  display:flex;
}
.my-list-container {
  overflow-y: auto;
}
.flex-end { 
  align-self: flex-end;
}