JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<script src="https://raw.github.com/lukemartin/aequus/master/jquery.aequus.js"></script>
<div class="wrap">
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet.</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendusAd quis repellat repellendus Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
</div>

<hr>
    
<div class="wrap2">
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente...

SCSS

body {
  background-color: #efefef;
  font-family: 'helvetica';
  line-height: 1.5;
}
.wrap {
  overflow: hidden;
  padding: 20px;
}
section {
  @include box-shadow(rgba(#000, 0.5) 0 0 5px);
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
}

@media (min-width: 600px) {
  section {
    float: left;
    margin-right: 2%;
    padding: 20px 2%;
    width: 45%;
  
    &:nth-child(2n) {
      margin-right: 0;
    }
  }
}

@media (min-width: 900px) {
  section {
    width: 28%;
  
    &:nth-child(2n) {
      margin-right: 2%;
    }
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}

@media (min-width: 1200px) {
  section {
    width: 19.5%;
  
    &:nth-child(3n) {
      margin-right: 2%;
    }
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}

JavaScript

$(document).ready( function() {
    $('.wrap').aequus( 'section' );
    $('.wrap2').aequus({
        targetSelector: 'section',
        resizeInRows: false
    });
} );