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-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-info'>1</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-success'>2</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-warning'>3</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-danger'>4</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-info'>5</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-success'>6</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-warning'>7</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-danger'>8</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-info'>9</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-success'>10</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-warning'>11</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-danger'>12</div>
<div class='col-xs-7'>
Foo<br><br><br>
<div class='row'>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-info'>1</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-success'>2</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-warning'>3</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-danger'>4</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-info'>5</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-success'>6</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-warning'>7</div>
<div class='col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 alert alert-danger'>8</div>
<div class='col-xs-1 col-sm-1 col-md-1...