JSFiddle - React, Tailwind, and code Playground
HTML
<div class="filter">
<h3 style="">Blog Profession Filters</h3>
<div class="tags">
<div class="col">
<label>
<input type="checkbox" rel="accounting" />Accounting</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="courier" />Courier</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="project-management" />Project Management</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="video-games" />Video Games</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="dentistry" />Dentistry</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="librarian" />Librarian</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="programmer" />Programmer</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="architect" />Architect</label>
</div>
</div>
<div class="tags">
<div class="col">
<label>
<input type="checkbox" rel="photographer" />Photographer</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="it" />IT</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="artist" />Artist</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="web-developer" />Web Developer</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="web-designer" />Web Designer</label>
</div>
<div class="col">
<label>
<input...
CSS
.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}
.tags {
/*display: table;*/
position:relative;
vertical-align: bottom;
white-space: nowrap;
}
.tags .col {
display:inline-block;
vertical-align:top;
min-width:165px;
}
.results {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}