JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="conform">
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend euismod purus, eget euismod erat blandit a. Proin vel scelerisque diam. Mauris eleifend luctus dolor vitae fringilla. Duis volutpat lorem dolor. Vestibulum hendrerit magna ligula, fermentum rhoncus ante venenatis at. Suspendisse molestie felis quis condimentum congue. Mauris bibendum nulla at fermentum sodales. Duis fermentum sodales nulla, sit amet mollis neque tristique sed.</div>
    <div class="box">Suspendisse potenti. Sed venenatis posuere convallis. Vivamus blandit est quis lectus vestibulum vulputate. Duis vitae nibh elit. Vestibulum hendrerit mollis mauris quis tincidunt. Aliquam vel nunc pretium leo consectetur bibendum a id urna. Pellentesque diam metus, condimentum ut rutrum non, egestas dapibus mauris. Pellentesque ullamcorper vestibulum convallis. Integer vel ultricies justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris laoreet velit eu quam malesuada convallis. Quisque gravida eu dui vitae venenatis. Aliquam dictum, quam nec rutrum volutpat, eros enim egestas ligula, et dictum elit diam at odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis tortor lacus, eget ultrices mi tempus sit amet. Aliquam vel tincidunt libero.</div>
    <div class="box">Cras malesuada eros fringilla mi accumsan sollicitudin. In quis vehicula massa. Donec tellus diam, congue sed laoreet vitae, tincidunt ut lorem. Phasellus tempus, nunc a volutpat iaculis, libero purus lacinia augue, a interdum tellus dui ac lectus. Phasellus consectetur felis vel leo mollis mollis sit amet quis tortor. Mauris molestie interdum auctor. Sed vehicula nulla erat, et mollis tellus luctus sit amet. Proin tristique, lorem ac adipiscing ultricies, diam turpis fringilla sapien, sit amet aliquet orci lorem at tortor. Integer facilisis, velit a dictum lobortis, sapien eros aliquet dolor, non sollicitudin nisi leo...

CSS

*{
    font-family: sans-serif;
    box-sizing: border-box;
}
.conform{
    display: block;
    width: 100%;
    overflow:hidden;
}
.box{
    display:block;
    width:33.33%;
    padding:20px;
    background:#333;
    color:#fbfbfb;
    float:left;
}

JavaScript

// Conformed Heights - change .conform to your element
var conformedBoxes = $('.conform');
conformedBoxes.each(function(){ 
     // Gets height of element 
    var height = $(this).height();
     // Apply height to children
     $(this).children('.box').css("height", height); 
});
alert(height);