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">
  <div class="row row-full-height row1">
      <div class="col col1 col-md-3">
            Column 1
      </div>
      <div class="col col2 col-md-3">
            Column 2
      </div>
      <div class="col col3 col-md-3">
          <div class="row">
              Column 3
          </div>
          <div class="row">
              Column 4
          </div>
      </div>
  </div>
</div>

CSS

.col1{
  background-color: red;
  color: white;
}

.col2{
  background-color: green;
  color: white;
}

.col3{
  background-color: yellow;
}

.row-full-height {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}