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="row equal h-100">
  <div id="left-col" class="col-md-4 pr-md-2">
    <div class="card">
      Left Card
    </div>
  </div>
  <div id="right-col" class="col-md-8 pl-md-2">
    <div id="right-card-container">
      <div class="card">
        <div class="card-header">Right Card</div>
        <div class="card-block h-100 py-0">
          <div id="right-card-content" class="row">.</div>
        </div>
      </div>
    </div>
    <div id="right-bottom-element" class="mt-md-3">
      Right Bottom Element
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
}

div.card {
  height: 100%;
}

#left-col {
  height: 100%;
}

#right-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#right-card-container {
  flex: 1;
}

#right-card-content {
  height: 100%;
  background: red;
}

#right-bottom-element {
  background: blue;
  display: inline-block;
  height: 100px; 
  width: 100%;
}