JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<html>
  <body>
    
    <div class="news">
      <div class="news__item" style="height: 200px;"></div>
      <div class="news__item" style="height: 250px;"></div>
      <div class="news__item" style="height: 210px;"></div>
      <div class="news__item" style="height: 240px;"></div>
      <div class="news__item" style="height: 220px;"></div>
      <div class="news__item" style="height: 230px;"></div>
  </div>
    
  </body>
</html>

CSS

.news {
  width: 510px;
  padding: 10px 10px 0;
  
  border: 1px solid #000;
}
.news:after {
  content: "";
  display: table;
  width: 100%;
}
.news__item {
  float: left;
  width: 250px;
  margin: 0 0 10px;
  
  background: #000;
}
.news__item:nth-child(even) {
  float: right;
}