JSFiddle - React, Tailwind, and code Playground

by Vladimir Rubanyuk

HTML

<div class="wrapper">
    <div class="container">
        <div class="leftCol">
            <ul>
                <li><a href="">Lorem.</a></li>
                <li><a href="">Cumque?</a></li>
                <li><a href="">Dolorum!</a></li>
                <li><a href="">Inventore.</a></li>
                <li><a href="">Quia.</a></li>
            </ul>
        </div>
        <div class="baseCol">
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quod hic qui tenetur molestias a laboriosam voluptas suscipit id aspernatur vero exercitationem ipsa temporibus pariatur dicta facilis maxime modi laudantium!</div>
            <div>Adipisci assumenda deserunt perspiciatis repudiandae dicta cum nostrum unde modi molestias atque laboriosam sunt delectus quod dolore consectetur. Maiores ab nemo nesciunt tempora necessitatibus totam hic dicta ut incidunt culpa.</div>
            <div>Inventore ratione eius velit tempore repudiandae doloribus esse hic quam tenetur perferendis repellendus dignissimos quis officiis delectus non iste ex. Maxime illo deleniti amet voluptates labore quia cumque laudantium nemo.</div>
            <div>Itaque repellat nam impedit deleniti. Ratione debitis aperiam ex in earum culpa eos error quo qui perspiciatis fugiat nostrum recusandae fuga voluptatem ullam suscipit quisquam dolorum harum atque quae a?</div>
        </div>
        <div class="rightCol">
            <ul>
                <li><a href="">Lorem.</a></li>
                <li><a href="">Porro!</a></li>
                <li><a href="">Eligendi.</a></li>
                <li><a href="">Officia.</a></li>
                <li><a href="">Facilis!</a></li>
                <li><a href="">Odit.</a></li>
                <li><a href="">Voluptatibus?</a></li>
                <li><a href="">Aperiam?</a></li>
                <li><a href="">Sequi.</a></li>
                <li><a href="">Dolore!</a></li>
                <li><a href="">Quas?</a></li>
               ...

CSS

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.container {
    background: #ccc;
    width: 800px;
    margin: 0 auto;
}
.rightCol,
.leftCol {
    background: #aaa;
    position: relative;
    float: left;
    width: 190px;
    margin: 0 5px;
}
.rightCol {
    float: right;
}
.baseCol {
    background: #ddd;
    position: relative;
    float: left;
    width: 390px;
    padding: 0 5px;
}
.clearfix {
    clear: both;
}

JavaScript

function adjustHeights() {
    var leftCol = document.querySelector('.leftCol');
    var rightCol = document.querySelector('.rightCol');
    var baseCol = document.querySelector('.baseCol');
    
    var maxHeight = Math.max(leftCol.scrollHeight, rightCol.scrollHeight);
    baseCol.style.height = maxHeight + "px";   
}