JSFiddle - React, Tailwind, and code Playground

HTML

<div id="siteWrapper">
    <div id="siteInnerLeft">
        <div id="homeNavLink">
            <p>Click me</p>
        </div>
    </div>
    
    <div id="siteInnerRight">
       <div class="pushmenu-push">
           <p>Current page content</p>
        </div>
        
        <div class="pushmenu pushmenu-left">
            <p>Content to slide in from the left</p>
        </div>
        
        <div id="footer">
            <p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p>
        </div>

    </div>
    
    
    
</div>

CSS

#siteWrapper{
    max-width:500px;
    margin:0 auto;
    width:100%;    
}

#siteInnerLeft{
    background-color:green;
    width:100px;
    float:left;
    position:fixed; /* Sidebar that needs to be fixed*/
}

#siteInnerRight{
    width: 400px;
    background-color:yellow;
    float:left;
    margin-left: 100px; /*Compensates for fixed header width */
}

.pushmenu {
        background: #e9e8e0;
        font-family: georgia,times news roman, times, serif;
        position: fixed;
        width:400px;
        height: 100%;
        top: 0;
        z-index: 1000;
}


.pushmenu-push{
    left: 0;
    overflow-x: hidden;
    position: relative;
    width: 100%;  
    
}

.pushmenu-left{
    left:400px;
}

.pushmenu, .pushmenu-push {
    transition: all 0.3s ease 0s;
}

#footer{
    width:100%;
    clear:both;
    background-color:red;
}

JavaScript

$menuLeft = $('.pushmenu-left');
                $nav_list = $('#homeNavLink');
                 
                $nav_list.click(function() {
                        $(this).toggleClass('active');
                        $('.pushmenu-push').toggleClass('pushmenu-push-toright');
                        $menuLeft.toggleClass('pushmenu-open');
                });