JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bgcontainer_center">
    <div id="sidebar">
        <p>Sidebar Content</p>
    </div>
    <div id="wrapper">
        <div id="toggle">
            <input type="button" value="Toggle Sidebar">
        </div>
        <p>Main Content</p>
    </div>
</div>

CSS

.bgcontainer_center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 500px;
    background-color: #ff00ff;
    height: 100%;
}
.bgcontainer_center.clicked {
    max-width: 350px;
}
#sidebar {
    float: left;
    width: 25%;
    max-width: 125px;
    background-color: #00ff00;
    height: 100%;
    left: 0px;
    display:block;
}
#wrapper {
    width: auto;
    max-width: 350px;
    background-color: #0000ff;
    overflow-x: hidden;
}

JavaScript

$(document).ready(function () {
        var sidebarVisible = localStorage.getItem('sidebar') == 'true';
        $('#sidebar').toggle(sidebarVisible);
        $('.bgcontainer_center').toggleClass('clicked', sidebarVisible);

        $("#toggle").click(function () {
            $("#sidebar").toggle("slow", function () {
                localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
            });

            $(".bgcontainer_center").toggleClass('clicked');
        });
    });