JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_pannel">
    <div id='panel' direction="rtl">Pannel Details here</div>
    <div id='click'></div>
    <div class="right-contents">demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here demo texts here</div>
</div>

CSS

#panel
{
    height: 450px;
    width: 200px;
    background: black;
    display: none;
    color: white;
    font-size: xx-large;
}
#panel[direction="ltr"] {
    float:left;
}
#panel[direction="rtl"] {
    float: right;
}
#click {
    height: 50px;
    width: 25px;
    background: red;
    float: left;
    margin-top: 200px;
}

JavaScript

$('#click').click(function () {
    $("#panel").animate({
        width: 'toggle'
    }, 500);
});