JSFiddle - React, Tailwind, and code Playground

by wdm954

HTML

<div id="a">
    <div class="col1">testing col1</div>
    <div class="col2">testing col2</div>
</div>
<div id="b">
    Test test test.
</div>

CSS

html, body { padding: 0px; }

#a, #b {
    width: 50%;
    height: 400px;
    float: left;
    overflow-y: scroll;
}
#a .col1, #a .col2 {
    width: 50%;
    float: left;  
}
#a .col1 {
    background-color: #ccc;
}
#a .col2 {
    background-color: #999;
}

JavaScript

$(document).ready(function() {
    
    // optional jQuery if you would like to set the column heights dynamically.
    $('#a, #b').height( $(window).height() );
    $(window).resize(function() {
        $('#a, #b').height( $(window).height() );
    });

});