JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<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 tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
 ...

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

// nice to keep selector instead of list of elements, but once resized is fired, the static list of elements should be passed so we're not doing different computation on different lists of elements

(function( $ ) {
    console.clear();
    
    'use strict';
    
    var Aequus,
        aequus,
        defaults = {
            targetSelector: 'li',
            resizeInRows: true
        };
    
    Aequus = function( $elem ) {
        this.$elem = $elem;
    };
    Aequus.prototype = {
        init: function( options ) {
            if( typeof options === 'object' ) {
                this.options = $.extend(defaults, options);
            } else {
                this.options = $.extend(defaults, {
                    targetSelector: options
                });
            }
            this.setup();
        },
        setup: function( ) {
            self = this;
            $(window).resize(function() {
                self.handleResize();
            }).trigger('resize');
        },
        handleResize: function() {
            var columns = this.getColumns(),
                $targets = $(this.options.targetSelector),
                i = 0;

            $targets.css('min-height', 0);
            
            if(columns > 1) {
                if(this.options.resizeInRows) {
                    for(i; i < Math.ceil($targets.length / columns); i += 1) {
                        this.applyHeights($targets.slice(columns * i, (columns * i) + columns));
                    }
                } else {
                    this.applyHeights($targets);
                }
            }
        },
        applyHeights: function( $targets ) {
            var height = -1,
                currentHeight = 0;
            
            $targets.each(function() {
                currentHeight = $(this).height();
                if(currentHeight > height) {
                    height = currentHeight;
                }
            });
            $targets.each(function() {
          ...