JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideleft" class="slide">
    <button type="button" class="btn-event">ICON</button>
    <div class="inner" style="left: -200px;">Efeito lateral de toogle.</div>
</div>

CSS

.slide {
     position:relative;
     overflow:hidden;
     height:120px;
     width:350px;
     margin:1em 0;
     background-color:#ffc;
     border:1px solid #999;
 }
 .slide * {
     transition: margin-left 1s;
 }
 .slide .inner {
     position:absolute;
     left:0 px;
     bottom:0 px;
     width:260px;
     height:15px;
     padding:6px;
     background-color:#4c5;
     color:#333;
    bottom: 0px;
 }
 .slide button {
     margin:.7em 0 0 .7em;
     position: absolute;
     left: 0px;
     bottom:2px;
     z-index: 100;
 }
 #slidebottom .inner {
     display:none;
 }
.slide .aberto{
    margin-left: 200px;
}

JavaScript

$(document).ready(function () {
    $('#slideleft button').click(function () {
       $(this).toggleClass('aberto').next().toggleClass('aberto');
    });
});