JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="sidebar">
        <nav>
            <ul>
                <li>Test 1</li>
                <li>Test 2</li>
                <li>Test 3</li>
                <li>Test 4</li>
                <li>Test 5</li>
            </ul>
        </nav>
    </div>
    <div class="content">
        <button class="toggle">Click me</button>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
</div>

CSS

.wrapper {
    overflow: hidden;
}
.sidebar {
    float: left;
    background-color: #454545;
    width: 20%;
}
.expand .sidebar {
    width: 40%;
}
.content {
    float: left;
    background-color: #3f3f3f;
    max-width: 80%;
    width: 100%;
    position: relative;
}
.expand .content {
    max-width: 60%;
}
.sidebar, .content {
    transition: all 0.4s; 
}
.toggle {
    
    position: absolute;
    top: 10px;
    left: 10px;
}

JavaScript

$('.toggle').on('click', function() {
    $('.wrapper').toggleClass('expand');
});