JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div class="col3">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta.</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor.</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor.</p>
    </div>
</div>

CSS

.col3 .span2 {
    width: 66.45%;
}
.col3 .span3 {
    width: 100%;
}
.col3 .last:after, .col2 .last:after {
    clear: both;
}
div.col3, div.col2 {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.col3 div {
    width: 33%;
    float: left;
    border-right: 2px solid red;
}
.col3 div.last, .col2 div.last {
    border-right: none;
}
.col3 div p {
    padding: 5px;
}

JavaScript

var maxHeight=0;
$('div.col3 div').each(function(){
console.log($(this).height());
    if($(this).height()>maxHeight)maxHeight = $(this).height();
});
$('div.col3 div').height(maxHeight);