JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid container-table">
  <div class="row inline-row">
    <div class="col-xs-12 col-sm-3">
      <div class="row">
        <div class="col-xs-12 aqua"></div>
        <div class="col-xs-12 blue"></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 yellow">
    <p>Div width: 50% Height 100%</p>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div class="row">
        <div class="col-xs-12 greenyellow"></div>
        <div class="col-xs-12 green"></div>
      </div>
    </div>
  </div>
</div>

CSS

/* Colors */
.aqua{ background-color:aqua; }
.blue{ background-color:blue; }
.yellow{ background-color:yellow; }
.greenyellow{ background-color:greenyellow; }
.green{ background-color:green; }

/* Height 100% to all the elements */
html, 
body, 
.container-table, 
.inline-row, 
.inline-row > div {
    height: 100%;
}

/* We do the trick here with Table, table row and table-cell */
.container-table {
    display: table;
    width: 100%; /* Width is important for display:table */
}
.inline-row { display: table-row; }
.inline-row > div { display: table-cell; }

/* This will set our heights as we need them */
.inline-row > div > .row { height: 100%; }
.inline-row > div .row > div { height: 50%; }