JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="slide()">Animate outer div width to 0</button> <button onclick="slideBack()">Undo animation</button><br />

<div class="outer col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="inner">icies nisl ut felis, suspendisse potenti.
    </div>
</div>

CSS

div.outer {
    margin: 20px;
    padding: 0;
    -webkit-transition: width 350ms ease-in-out;
    -moz-transition: width 350ms ease-in-out;
    -o-transition: width 350ms ease-in-out;
    -ms-transition: width 350ms ease-in-out;
    transition: width 350ms ease-in-out;
    overflow: hidden;
}

.collapsed {
    width: 0px;
}

div.inner {
    background-color: whitesmoke;
    overflow: hidden;
    text-align:center;
}

JavaScript

function slide() {
    $(".inner").width($(".inner").width());
    $(".outer").addClass("collapsed");
}
function slideBack() {
    
    $(".outer").removeClass("collapsed");
    setTimeout(function() {$(".inner").width("auto");}, 350);
}