JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="things">
  <div class="things__thing">Lorem ipsum dolor.</div>
  <div class="things__thing">
  Perspiciatis tenetur, enim.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore totam magnam perferendis perspiciatis suscipit corrupti voluptatibus ut ea, aliquam modi dolorem culpa tempora. Repellat, quas!
  </div>
  <div class="things__thing">Nulla, cumque, eaque.</div>
  <div class="things__thing">Nulla, cumque, eaque.</div>
  <div class="things__thing">Perspiciatis tenetur, enim.</div>
</div>

SCSS

* {
  box-sizing: border-box;
}

@mixin columns($columns, $gutter) {
  display: flex;
  flex-wrap: wrap;

  > * {
    width: calc(#{100%/$columns} - #{$gutter * ($columns - 1) / $columns});
    background: pink;
    margin-bottom: $gutter;
    
    &:nth-child(n) {
      margin-left: 0;
    }

    &:not(:nth-child(#{$columns}n + 1)) {
      margin-left: $gutter;
    }
  }
}

.things {
  @include columns(2, 40px);
  
  @media screen and (min-width: 600px) {
    @include columns(3, 60px);
  }
  
  &__thing {
    padding: 30px;
  }
  
  &__thing:last-child {
    flex-grow: 1;
  }
}