JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-6">
<div class="row">
<h1 style="padding:0px;margin:0px">PageTitle.</h1>
</div>
<div class="row">
<h4>
Select a choice.
</h4>
</div>
</div>
<div class="col-xs-6">
<div id="statspanel" class="row">
<div class="col-xs-6 col-sm-3" width="100%" height="100%">
<div class="row" width="100%" height="100%">
<div id="scorediv" class="col-xs-3 col-sm-1" width="100%" height="100%">
<h1><span id="userscorespan">+5</span></h1>
</div>
<div id="statsdiv" class="col-xs-3 col-sm-2 statsbox" width="100%" height="100%">
<div class="row" width="100%" height="100%">
<div id="statsyesdiv" class="statsbaryes"></div>
</div>
<div class="row" width="100%" height="100%">
<div id="statsnodiv" class="statsbarno"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3" width="100%" height="100%">
<div class="row" width="100%" height="100%">
<div class="col-xs-3" width="100%" height="100%">
<img id="image1" alt="image" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" height="100%" width="100%" />
</div>
<div class="col-xs-3" width="100%" height="100%">
<img id="image2" alt="face" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" height="100%" width="100%" />
</div>
</div>
</div>
</div>
</div>
...
CSS
.progress {
width: 150px;
border: 1px solid black;
padding: 3px;
}
.statsbaryes {
height: 20px;
background-color: green;
width: 30%;
}
.statsbarno {
height: 20px;
background-color: red;
width: 50%;
}
.statsbox {
height: 100px;
right:0px;
width:100%;
border: 3px solid #0071C3;
}