JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
    <div class="col-md-3 grey">
        <div class="row">
            <div class="col-md-4 green">4</div>
            <div class="col-md-1 blue">1</div>
            <div class="col-md-4 yellow">4</div>
            <div class="col-md-2 blue">2</div>    
        </div> 
    </div>
    <div class="col-md-9 blue">9</div>
</div>
<div class="row">
    <div class="col-md-3 grey">
        <div class="row">
            <div class="col-md-4 green">4</div>
            <div class="col-md-1 blue">1</div>
            <div class="col-md-4 yellow">4</div>
            <div class="col-md-3 blue">3</div>    
        </div> 
    </div>
    <div class="col-md-9 blue">9</div>
</div>
</div>

CSS

.green {
    background-color: lightgreen;
}
.blue {
    background-color: lightblue;
}
.yellow {
    background-color: yellow;
}
.grey {
    background-color: lightgrey;
}

.row {
  margin-right: -10px !important;
  margin-left: -10px !important;
}

.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    padding-right: 10px !important;
    padding-left: 10px !important;
}