JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<ul>
  <li>
    <div class="content">Donec tincidunt dolor a rhoncus elementum. In pharetra mauris sit amet orci mattis porttitor.</div>
  </li>
  <li>
    <div class="content">Suspendisse tempor augue et augue egestas convallis. Sed vitae faucibus sem. Quisque aliquet arcu quis nisi dictum.</div>
  </li>
  <li>
    <div class="content">Nulla euismod nec elit et vehicula. Nulla ultricies lorem suscipit velit fermentum egestas. Fine dulcrum est trinit ren mi faucibus vel. Pellentesque ultricies.</div>
  </li>
  <li>
    <div class="content">Maecenas placerat pharetra ex, id placerat mi faucibus vel. Pellentesque ultricies quam vel risus scelerisque ultricies renimum.</div>
  </li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  background: rgba(0,0,0,0.1);
  float: left;
  margin: 0 2px;
  padding: 12px 6px;
  width: calc(25% - 20px);
}

.the-first {
  border: 1px solid red;
}

.the-second {
  border: 1px solid blue;
}

JavaScript

// run this function on each 'content' class, and note the (i)ndex and (el)ement of it
$('.content').each(function(i, el){
// if the index number divided by 2 is zero (i.e. it's an even number)
  if (i % 2 === 0) {
// then add 'the-first' class to the parent 'li'
    $(this).parent().addClass('the-first');
  } else {
// if not, then add 'the-second' class to the parent 'li'
    $(this).parent().addClass('the-second');
  }
});

// set a counter
var count = 0
// run this function on each 'li'
$('li').each(function() {
// if the element has 'the-first' class
    if( $(this).hasClass('the-first') ) {
// then set the variable 'doubleIndex' that increments the counter by 1 
		var doubleIndex = count++;
// then, add the class 'double-' + the current value of 'doubleIndex' to the 'li' as well as to the next 'li'
    $(this).addClass('double-' + doubleIndex).next().addClass('double-' + doubleIndex);
// define the variable 'theFirst' to hold the classes from the first 'li'
		var theFirst = $(this);
// define the variable 'theSecond' to hold the classes from the second 'li'
    var theSecond = $(this).next();
// define the variable 'firstHeight' to hold the height of the first 'li'
    var firstHeight = theFirst.css('height');
// define the variable 'secondHeight' to hold the height of the second 'li'
    var secondHeight = theFirst.next().css('height');
// if the first 'li' has more height than the second 'li'
    if ( firstHeight > secondHeight ) {
// then make the height of the second 'li' the same as the first 'li'
			$(theSecond).css('height', $(theFirst).css('height'));
    }
// otherwise
    else {
// make the height of the first 'li' the same as the second 'li'
			$(theFirst).css('height', $(theSecond).css('height'));
    }
	
  } else {
      
  }
});