JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<div class="container">
    <div class="item">
        <div class="left">
            <div class="content">
                lorem lorem<br/>
                lorem<br/>
                lorem<br/>
                lorem<br/>
                lorem<br/>
                lorem
            </div>
        </div>
        <div class="right">
            <div class="content">
                <p>right</p>
                <div class="bottom">bottom</div>
            </div>
        </div>
    </div>
</div>

CSS

.container {
    float: left;
    padding: 15px;
    width: 600px;
    background-color: #27C6C8;
}

.item {
    float: left;
    padding: 15px;
    width: 570px;
    background-color: #FFD4B4;
    color: #ffffff;
}
.left {
    float: left;
    margin-right: 10px;
    background-color: #C82927;
}
.left .content {
    padding: 40px 20px;
}
.right {
    position: relative;
    overflow: hidden;
    background-color: #C82927;
}
.right .content {
    padding-bottom: 20px;
}
.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #333;
}

JavaScript

function updateColumnHeights() {
    var height = Math.max($('.container .left').height(),
                          $('.container .right').height());
    $('.container .left').height(height);
    $('.container .right').height(height);
}
$(window).on('resize', function(){  updateColumnHeights(); });
$(document).ready(function(){ updateColumnHeights(); });