columns

HTML

<div class="foo">
  <div class="bar">dsfaf</div>
  <div class="bar">fasf</div>
  <div class="bar">asdf</div>
  <div class="bar">adfssf</div>
  <div class="bar">af</div>
  <div class="bar">adf</div>
  <div class="bar">adsf</div>
  <div class="bar">adsf</div>
  <div class="bar">asfasdf</div>
</div>

CSS

.foo {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  
  
  column-gap: 2em;   shown in yellow            
  column-rule: 4px solid green;
  padding: 5px;      shown in blue
} 

.bar {
  background-color: red;
  width: 100%;
  height: 100px;
  
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

.bar:nth-child(2n+1) {
    background-color: #00ff00;
    height: 80px;
}
.bar:nth-child(3n+4) {
    background-color: #0000ff;
    height: 70px;
}