JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block">
        <div id="primary">
            <div id="panel-1" class="panel">Panel 1 <br/> <a href="#" id="return">Return</a></div>
            <div id="panel-2" class="panel">Panel 2 <br/> <a href="#" id="return">Return</a></div>
            <br />
            <a href="#" id="trigger-1">One</a>
            <a href="#" id="trigger-2">Two</a>
        </div>
        <div id="secondary">
            secondary content
        </div>
    </div>
 
    Other content below these blocks also gets pushed.

CSS

#block {
    width: 100%;
    overflow: hidden;
    border:1px solid #000;
}
#primary {
    background: #ff0;
    width: 60%;
    float: left;
    text-align: center;
    padding: 20px 0;
}
#secondary {
    background: #df0;
    width: 40%;
    float: left;
    text-align: center;
    padding: 20px 0;
}
#panel-1 {
    background: #d00;
}
#panel-2 {
    background: #d00;
}
.panel {
    display: none;
}

JavaScript

$(document).ready(function () {
    $("#trigger-1").click(function () {
        $("#secondary").animate({ width: 0 });
        $("#primary").animate({ width: '100%' });
        $("#panel-1").css({ display: "block" }).animate({
            height: 200,
            width: '100%',
            opacity: 1
        });
        return false;
    });
    $("#trigger-2").click(function () {
        $("#secondary").animate({ width: 0 });
        $("#primary").animate({ width: '100%' });
        $("#panel-2").css({ display: "block" }).animate({
            height: 200,
            width: '100%',
            opacity: 1
        });
        return false;
    });
    $("#return").click(function () {
        alert(1);
        $("#primary").animate({ width: '60%' });
        $("#secondary").animate({ width: '40%' });
        $(".panel").animate({
            height: 0,
            width: 0,
            opacity: 0
        });
        return false;
    });
});