JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    header 'n' stuff
</header>
<br clear="all">
<div id="main">

    <div class="left equalize">        
    <p>it doesn't matter how big the height of this element is. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  </p>
    </div>
    <div class="mid equalize">
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.  </p>
    </div>
    <div class="right equalize">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
    </div>
<br clear="all">
</div>

<footer>
    footer
</footer>

CSS

#main {
    background: green;
}

.left {
    width:30%;
    float:left; 
    margin-right: 10px;
    background:green;
}

.mid {
    width:40%;
    height: 100%;
    margin-right: 10px;
    float:left;
    position:relative;
    background:blue;
}

.right {
    width:30%;
    float:left;
    background:red;
}

JavaScript

$(document).ready(function() {
    $('.equalize').css('height', highest($('p')));
    
    $(window).on('resize', function() {
        $('.equalize').css('height', highest($('p')));
    });
});

function highest(el) {
    var highest = 0;
    el.each(function() {
        var height = $(this).height();
        if(height > highest) {
          highest = height;
        }
    });
    return highest;   
}