JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
    </div>
    <div id="body">
        <div id="flip_body">
            <div id="top_body">
                <div id="top_body_left">
                    <p id="text">This will be a really long string to test if things get squished</p>
                    <div style="overflow: hidden; width: 250px;">
                        <div id="left_test" class="test">
                        </div>
                        <div id="right_test" class="test">
                        </div>
                    </div>
                </div>
                <div id="top_body_right">
                </div>
            </div>
            <div id="bottom_body">
            </div>
        </div>
        <div id="flip">
            <p>Flip</p>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

CSS

#container
{
    width:1000px;
    height:600px;
    background-color:red;
}
#header
{
    width:100%;
    height:15%;
    background-color:orange;
}
#body
{
    width:100%;
    height:70%;
    background-color:yellow;
}
#top_body
{
    width:100%;
    height:100%;
    background-color:red;
    
}
#bottom_body
{
    width:100%;
    height:100%;
    background-color:pink;
    display:none;
    
}
#flip_body
{
    width:90%;
    height:100%;
    float:left;
    position:relative;
}
#flip
{
    width:10%;
    height:100%;
    float:left;
    background-color:green;
}
#top_body_left
{
    height:100%;
    float:left;
    background-color:teal;
    position:absolute;
    left:0px;
    top:0px;
    bottom: 0px;
    width: 250px;
    overflow: hidden;
}
#top_body_right
{   
    height:100%;
    float:left;
    background-color:black;
    position:absolute;
    left:300px;
    top:0px;
    bottom: 0px;
    width: 200px;
}
#text
{
    overflow:hidden;
}
#left_test
{
    background-color:orange;
    
}
#right_test
{
    background-color:red;
    width:150px;
}
.test
{
    width:100px;
    height:100px;
    float:left;
}
#footer
{
    width:100%;
    height:15%;
    background-color:blue;
}

JavaScript

$("#flip").data("open", false);

$("#flip").click(function() {
    // slide to the right
    if ($(this).data("open") == false) {
        $("#top_body_left").animate({
            width: 'toggle'
        }, 500);
        $("#top_body_right").animate({
            width: '+=100',
            duration: 500
        });

        $(this).data("open", true);
    }
    // slide to the left
    else {
        $("#top_body_left").animate({
            width: 'toggle'
        }, 500);
        $("#top_body_right").animate({
            width: '-=100'
        }, 500);

        $(this).data("open", false);
    }
});