JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="box"> Nulla esse consectetur laborum aliquid eius sit commodi atque excepturi doloribus dolorum mollitia illum, voluptatum, vitae, ea ex? Recusandae sit adipisci natus!</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, repudiandae, corrupti dignissimos rerum beatae neque expedita adipisci veritatis minus, voluptate consectetur laboriosam aspernatur vel.</div>
  <div class="box"> perferendis natus nemo sint temporibus quaerat</div>
  <div class="box"> tenetur dignissimos sed modi quae impedit!  tenetur dignissimos sed modi!</div>
  <div class="box">Nihil nisi totam consequatur nemo, accusamus labore temporibus, dolores fuga qui eum non, magni nostrum dolor</div>
  <div class="box">beatae neque expedita adipisci </div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="box"> Nulla esse consectetur laborum aliquid eius sit commodi atque excepturi doloribus dolorum mollitia illum, voluptatum, vitae, ea ex? Recusandae sit adipisci natus!</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, repudiandae, corrupti dignissimos rerum beatae neque expedita adipisci veritatis minus, voluptate consectetur laboriosam aspernatur vel.</div>
</div>

SCSS

.box {
  color: #333;
  font-family: Comic sans;
  float: left;
  background-color: lightyellow;
  max-width: 25vw;
  
  padding: 2rem;
  &:nth-child(2n-1) {
    max-width: 30vh;
    float:right;
    &:after {
      content: "";
      clear:both;
    }
  }
  margin-right: 1rem;
  margin-bottom: 1rem;
}