JSFiddle - React, Tailwind, and code Playground

HTML

<h1>TiTle</h1>

<div id="wrapper">
    <div id="box1" class="slidingDiv"> <a href="#" id="click1">Click to show other div</a>

        <br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.</div>
    <div id="box2" class="slidingDiv" style="display:none"> <a href="#" id="click2">Click to show other div</a>

        <br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.<br>More Line!</div>
</div>
<div>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.</div>
<div>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.</div>
<div>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.</div>

CSS

#wrapper {
    position:relative;
}
#wrapper div {
    position:absolute;
    top:0;
}

JavaScript

$(document).ready(function () {
    var maxHeight = 0;
    $('.slidingDiv').each(function() {
        if($(this).height() > maxHeight) maxHeight = $(this).height();
    });
    $('#wrapper').height(maxHeight);
    
    $('#click1').click(function () {
        $('#box1').hide("slide", {
            direction: "down"
        }, 1000);
        $('#box2').show("slide", {
            direction: "up"
        }, 1000);
    });
    $('#click2').click(function () {
        $('#box2').hide("slide", {
            direction: "up"
        }, 1000);
        $('#box1').show("slide", {
            direction: "down"
        }, 1000);
    });
});