JSFiddle - React, Tailwind, and code Playground

by CRHain88

HTML

<div class="ir-badgecard">
    <img src="" height="54" width="54" />
    <dl>
        <dt><span class="ir-badgecard-number">1</span>. Badge Name</dt>
        <dd>Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.</dd>
        <dd class="ir-badgecard-link">somelinkwithnospaces</dd>
    </dl>
</div>
<div class="ir-badgecard">
    <img src="" height="54" width="54" />
    <dl>
        <dt><span class="ir-badgecard-number">1</span>. Badge Name</dt>
        <dd>Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.</dd>
        <dd class="ir-badgecard-link">somelinkwithnospaces</dd>
    </dl>
</div>
<div class="ir-badgecard">
    <img src="" height="54" width="54" />
    <dl>
        <dt><span class="ir-badgecard-number">1</span>. Badge Name</dt>
        <dd>Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.</dd>
        <dd class="ir-badgecard-link">somelinkwithnospaces</dd>
    </dl>
</div>
<div class="ir-badgecard">
    <img src="" height="54" width="54" />
    <dl>
        <dt><span class="ir-badgecard-number">1</span>. Badge Name</dt>
        <dd>Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.</dd>
        <dd class="ir-badgecard-link">somelinkwithnospaces</dd>
    </dl>
</div>

CSS

.ir-badgecard {
  width: 280;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #fff;
  position: relative;
  padding: 10px;
  margin: 0 20px 30px;
  display: inline-block;
  vertical-align: top;
  min-height: 110px;
}
.ir-badgecard img {
  background: red;
  vertical-align: top;
  margin-top: -30px;
}
.ir-badgecard dl {
  display: inline-block;
  width: 212px;
  margin: 0 0 30px 10px;
}
.ir-badgecard dt {
  font-weight: bold
}

.ir-badgecard dd {
  margin: 0;
}

.ir-badgecard-link {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #aaa;
}

JavaScript

// Pull the min-height from the CSS file to keep style seperate from JS.
var defaultMinHeight = $('.ir-badgecard').css('min-height').replace('px', '');

var columns = 2;
var rowdata = [];
var maxHeight = defaultMinHeight;

// Loop through each visible data-content row to determine if the height needs to be adjusted.
$('.ir-badgecard').each(function( key, value ) {
    var $this = $(this);
    var height= $this.height();
    
    maxHeight = ( height > maxHeight ) 
        ? height 
        : maxHeight;
    
    rowdata.push( $this );
    
    if ( rowdata.length === columns ) {
        
        // Find out if the height needs to be adjusted.
        if ( maxHeight > defaultMinHeight ) {
            $.each(rowdata, function(key, value) {
                value.height( maxHeight );
            });
        }
        
        // Clear rowdata and maxHeight
        rowdata = [];
        maxHeight = defaultMinHeight;
        
    }
    
    // Remove any previously set styles for a fresh calculation.
    $this.removeAttr('style');
    
    // If the row is larger than the min-height, change the height for all columns.
//    if( maxHeight > defaultMinHeight ){
//        $columns.height(maxHeight);
//    }
});