JSFiddle - React, Tailwind, and code Playground

by Francis Trujillo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid text-left wrapper">
  <div class="row topRow header">
    <div id="topLayout" class="col-xs-12">
      Top Layout
    </div>
  </div>
  <div class="row middleRow">
    <div id="leftLayout" class="col-xs-2 navigation">
      Left Layout
    </div>
    <div id="rightLayout" class="col-xs-10 content">
      Right Layout
    </div>
  </div>
</div>

CSS

html,body {
    padding: 0px;
    margin: 0px;
    height: 100%;
    background-color: #eeeeee;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    background: coral;
    width: 100%;
    height: 100%;
    display: table;
}

.topRow {
    background: yellow;
    height: 75px;
}

.middleRow {
    background: lightgreen;
    height: calc(100% - 75px);
}

.navigation {
    background: white;
    height: 100%;
}

.content {
    background: lightblue;
    height: 100%;
}