<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="grippers first"> <div class="row"> <div class="cell"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Alpha <div class="pull-right"> <span class="glyphicon glyphicon-search"></span> </div> </h3> </div> <div class="panel-body"> <form> <div class="form-group"> <label for="exampleInputEmail1">Name</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Name"> </div> <button type="submit" class="btn btn-default">Search</button> </form> </div> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr><td>1</td><td>Alpha</td></tr> <tr><td>2</td><td>Bravo</td></tr> <tr><td>3</td><td>Charlie</td></tr> <tr><td>4</td><td>Delta</td></tr> <tr><td>5</td><td>Echo</td></tr> </tbody> </table> </div> </div> <div class="cell"> <div class="title">B</div> </div> <div class="cell"> <div class="title">C</div> </div> </div> </div> <div class="grippers second"> <div class="row"> <div class="cell"> <div class="title">A</div> </div> <div class="cell"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Bravo: Branch <div class="pull-right"> <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-plus" title="Add Bravo"></span> </div> </h3> </div> <div class="panel-body"> <form> <div class="form-group"> <label for="exampleInputEmail1">Name</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Name"> </div> <button type="submit" class="btn btn-default">Search</button> </form> </div> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr><td>1</td><td>Alpha</td></tr> <tr><td>2</td><td>Bravo</td></tr> <tr><td>3</td><td>Charlie</td></tr> <tr><td>4</td><td>Delta</td></tr> <tr><td>5</td><td>Echo</td></tr> </tbody> </table> </div> </div> <div class="cell"> <div class="title">C</div> </div> </div> </div> <div class="grippers third"> <div class="row"> <div class="cell"> <div class="title">Alpha: Trunk</div> </div> <div class="cell"> <div class="title">Bravo: Branch</div> </div> <div class="cell"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Charlie: Fruit <div class="pull-right"> <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-plus" title="Add Charlie"></span> </div> </h3> </div> <div class="panel-body"> <form> <div class="form-group"> <label for="exampleInputEmail1">Name</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Name"> </div> <button type="submit" class="btn btn-default">Search</button> </form> </div> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr><td>1</td><td>Alpha</td></tr> <tr><td>2</td><td>Bravo</td></tr> <tr><td>3</td><td>Charlie</td></tr> <tr><td>4</td><td>Delta</td></tr> <tr><td>5</td><td>Echo</td></tr> </tbody> </table> </div> </div> </div> </div>

.grippers { display: table; width: 100%; } .grippers .row { display: table-row; } .grippers .cell { display: table-cell; border: 1px solid red; min-width: 50px; } .grippers.first .cell:first-child { width: 100%; } .grippers.second .cell + .cell { width: 100%; } .grippers.third .cell + .cell + .cell { width: 100%; } .title{ writing-mode: sideways-lr; }