JSFiddle - React, Tailwind, and code Playground
by Kolichikov
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 shell">
<div class="col-sm-6 col-md-12">
<div class="item col-sm-12">Location</div>
<div class="item col-sm-12">Make</div>
<div class="item col-sm-12">Model</div>
</div>
<div class="col-sm-6 col-md-12">
<div class="item col-sm-12">Price</div>
<div class="item col-sm-12">Years</div>
<div class="item col-sm-12">Range</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item col-sm-12">Body Types</div>
<div class="item col-sm-12 expanded">Colour</div>
<div class="item col-sm-12">Drivetrain</div>
<div class="item col-sm-12">Fuel Types</div>
<div class="item col-sm-12">Engine</div>
<div class="item col-sm-12 expanded">Transmission</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item col-sm-12">Seating</div>
<div class="item col-sm-12 expanded">Doors</div>
<div class="item col-sm-12">Seller Type</div>
<div class="item col-sm-12">Photos</div>
<div class="item col-sm-12">CarProof/div>
</div>
</div>
</div>
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.item {
border: solid 1px #6c757d;
}
.shell
{
padding-left:0;
padding-right:0;
}
.expanded
{
height:100px;
}