JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<section class="analysis">
    <div class="menubar"><!-- flex item #1 (yellow) -->
        <div class="view-ctrls text-center">
            <div class="btn-group" role="group">
                <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button>
            </div>
        </div>
    </div>
    <div id="views-cntnr"><!-- flex item #2 (blue) -->
        <div class="r1">
            <div id="v1" class="view">V1</div>
            <div id="v2" class="view">V2</div>
            <div id="v3" class="view">V3</div>
        </div>
        <div class="r2">
            <div id="v4" class="view">V4</div>
        </div>
    </div>
    <div id="frame-ctrl-cntnr"><!-- flex item #3 (pink) -->
        <div id="frame-num" class="frame-ctrl"># X</div>
        <div id="frame-range-cntnr" class="frame-ctrl">
            <input type="range">
        </div>
    </div>
</section>

CSS

html, body { height: 100%; }

.analysis {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px dashed black;
}


/* MENUBAR */

.menubar {
    padding: 4px 0 4px;
    background-color: yellow;
}


/* menubar */


/* VIEWS */

#views-cntnr {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: aqua;
}


/* ROW 1 */

.r1 {
    display: flex;
}

.r1 .view {
    flex-grow: 1;
    border: black 1px solid;
    border-right: none;
}

.r1 .view:last-child {
    border-right: black 1px solid;
}


/* row 1 */


/* ROW 2 */

.r2 .view {
    border: black 1px solid;
    border-top: none;
}


/* row 2 */


/* views */


/* FRAME CTRL */

#frame-ctrl-cntnr {
    display: flex;
    background-color: lightpink;
}

.frame-ctrl {
    border: black 1px solid;
    border-top: none;
    border-right: none;
}

.frame-ctrl:last-child {
    border-right: black 1px solid;
}

#frame-num {
    width: 50px;
}

#frame-range-cntnr {
    flex-grow: 1;
    padding: 4px;
}


/* frame ctrl */

JavaScript

/*
var view_btns = $('view-ctrls button');

var active_views = [true, true, true, true];

var updateViews = function() {
  for (var i=0; i < view_btns.length; i++) {
   if ()
  }
}
*/