JSFiddle - React, Tailwind, and code Playground

by Joseph Tate

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
<div class="row">
    <div class="item">
      <div class="well"> 
        1 blah blah blah
      </div>
    </div>
 	<div class="item">
        <div class="well"> 
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        3 blah blah blah blah blah blah blah blah h
        </div>
    </div>
    <div class="item">
        <div class="well">
        blah blah blah blah 
        </div>
    </div>
    <div class="item">
        <div class="well"> 
          blah blah blah. The container inside the item must be position:relative
        </div>
    </div>
 	<div class="item">
        <div class="well"> 
        blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well">
        blah blah blah blah blah blah blah blah h
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        blah blah blah blah blah blah blah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
          blah blah blah. The container inside the item must be position:relative
        </div>
    </div>
</div>
</div>

CSS

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
    column-gap: 1em;  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.well {
 position:relative;
 display: block;
}