JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row" style="margin:0; height:546px;">
  <div class="col-md-4" style="background:red; min-height:546px; margin-right:2.08333333%"></div>
  <div class="col-md-2" style="padding-left:0; padding-right:0; height:167px; border:4px solid red; margin-right:2.08333333%; margin-bottom:2.08333333%"></div>
  <div class="col-md-2" style="padding-left:0; padding-right:0; height:167px; border:4px solid red; margin-right:2.08333333%; margin-bottom:2.08333333%"></div>
  <div class="col-md-2" style="padding-left:0; padding-right:0; height:167px; border:4px solid red; margin-right:2.08333333%; margin-bottom:2.08333333%"></div>  
<div class="col-md-1" style="background:red; min-height:167px">&nbsp;</div>
  <div class="col-md-2" style="padding-left:0; padding-right:0; height:357px; border:4px solid red; margin-right:2.08333333%"></div> 
   <div class="col-md-2" style="padding-left:0; padding-right:0; height:167px; border:4px solid red; margin-right:2.08333333%; margin-bottom:2.08333333%"></div>
  <div class="col-md-2" style="padding-left:0; padding-right:0; height:167px; border:4px solid red; margin-right:2.08333333%; margin-bottom:2.08333333%"></div>
  <div class="col-md-1" style="background:red; min-height:167px;">&nbsp;</div>
 <div class="col-md-2" style="padding-left:0; padding-right:0; height:167px; border:4px solid red; margin-right:2.08333333%"></div>
  <div class="col-md-2" style="padding-left:0; padding-right:0; height:167px; border:4px solid red; margin-right:2.08333333%"></div>
  <div class="col-md-1" style="background:red; min-height:167px">&nbsp;</div>
</div>

JavaScript

8.33333333%