JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1 mobile-hide"></div>
<div class="separator"></div>
<div class="div2"></div>

CSS

.div1 {
    background-color: #ffee99;
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}
.div1.hide {
    display: none;
}

.separator {
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    width: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 300px;
    z-index: 100;
}
.div1.hide + .separator {
    left: 0px;
}
.div2 {
    background-color: #99eeff;
    width: calc(100% - 300px);
    height: 100%;
    position: absolute;
    top: 0px;
    left: 300px;
}
.div1.hide + .separator + .div2 {
    left: 0px;
    width: 100%;
}

@media screen and (max-width: 500px) {
    .div1 {
        display: block;
    }
    .div1.mobile-hide {
        display: none;
    }
    .separator {
        left: 300px;
    }
    
    .div1.mobile-hide + .separator {
        left: 0px;
    }
    .div2 {
        width: 100%;
        left: 300px;
    }
    .div1.mobile-hide + .separator + .div2 {
        left: 0px;
        width: 100%;
    }
    
}

JavaScript

function hideLeftDiv() {
    var $div1 = $('.div1');
    var hasHideActive = $div1.hasClass('hide');
    var isVisible = $div1.is(':visible');
    
    // has Hide class but actually visible
    if(hasHideActive && isVisible) {
        $('.div1').addClass('mobile-hide');
    } else {
        $('.div1').addClass('hide');
    }
}

function showLeftDiv() {
    var $div1 = $('.div1');
    var hasHideActive = $div1.hasClass('hide');
    var isVisible = $div1.is(':visible');
    
    // Doesn't have hide class but not visible
    if(!hasHideActive && !isVisible) {
        $('.div1').removeClass('mobile-hide');
    } else {
        $('.div1').removeClass('hide');
    }
}

$('.separator').click(function() {
    $('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});