JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="parent">
        <div class="left-column">
             <h1>Content</h1>
            <br/>
            <h1>Content</h1>
            <br/>
            <h1>Content</h1>
            <br/>
        </div>
        <div class="right-column">
             <h1>right</h1><br/>
            
            <!-- remove these to see the height adjust  -->
            
            <h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/>
            
            <!-- remove these to see the height adjust  -->
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="footer">
         <h1>FOOTER</h1>

    </div>

CSS

h1 {
		    padding: 20px;
		}
		.left-column {
		    float:left;
		    background:red
		}
		.right-column {
		    float:right;
		    background:blue;
		}
		.clearfix {
		    clear:both;
		}
		.footer {
		    background:aqua;
		}

JavaScript

function heightAdjust() {
    lHeight = $(".left-column").outerHeight();
    rHeight = $(".right-column").outerHeight();
    if( lHeight >= rHeight){
    $(".right-column").outerHeight(lHeight);
    }
}

heightAdjust()

$(window).on('resize', function () {
    heightAdjust()
})

$(window).on('load', function () {
    heightAdjust()
})