JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="lnk1">show div 1</a> &nbsp;
<a href="#" id="lnk2">show div 2</a> 
<br/><br/>
<div id="divParent">
    <div id="div1">
        <pre>
    these are the contents of div 1
    div1 items here
    div 1 items
    </pre>
    </div>
    <div id="div2">
        <pre>
    these are the contents of div 2
    the quick brown fox jumsp over the lazy dog
    </pre>
    </div>
</div>

CSS

#divParent {
    border:1px solid blue;
    height:200px;
    overflow:auto;   
}

#div1{
 border:1px solid red;   
}

#div2{
    border:1px solid yellow;
}

JavaScript

$(document).ready(function() {
    var h1 = $("#div1").height();
    var h2 = $("#div2").height();
    $("#div1,#div2").height(Math.max(h1, h2));
    $("#div2").hide();
});

$("#lnk1").live('click', function() {
    $("#div1").show();
    $("#div2").hide();
});

$("#lnk2").live('click', function() {
    $("#div2").show();
    $("#div1").hide();
});