JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div id="wrap">
  <div class="container">
     <div class="boxA clearfix">
         <div class="box-header">boxA header</div>
         <div class="box-content"></div>
     </div>
    
     <div class="boxB clearfix">
         <div class="box-header">boxB header</div>
         <div class="box-content"></div>
     </div>
    </div>
</div>
<div id="footer">footer</div>

CSS

.boxA {
    width: 220px;
    padding: 0px 3px 5px 5px;
    float: left;
    height: 100%;
    margin-bottom: 0px;
    border: solid 1px green;
}

.boxB {
    width: 420px;
    padding: 0px 5px 5px 3px;
    float: right;
    height: 100%;
    border: solid 1px red;
}

html, body, #wrap, .box-content { height: 100%; }

.box-content {
    background-color: #EEEEEE;
    overflow-x: hidden;
    padding: 5px;
    padding-top: 10px;
    background-repeat: no-repeat;
    min-height:200px;
}

.box-header {
    position: relative;
    background-color: green;
    padding:11px 8px 5px;
    color: white;
    height:40px;
}

#wrap > .container {
  padding: 5px 0px 5px 0px;
  width: 650px;
  height: 100%;
  margin-bottom: 5px;
  border: solid 4px black;
}

#wrap {
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px 0px;
  border: solid 3px blue;
}

#footer {
  height: 60px;
  text-align: center;
  background-color: purple;
  color: white;
  clear: both;
}