JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

Click on div below for animation: 
<br /><br />
<div class="outer"><div class="inner">innerContent</div></div>

CSS

div.outer {
    cursor: pointer;
    position: absolute;
    padding: 10px;
    background: purple;
}

div.inner {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    background: orange;
    clip: auto; overflow: hidden;
}

JavaScript

$('.outer').click(function() {
    $('.inner').animate({
        width: 0,
        paddingLeft: 0,
        paddingRight: 0
    }, 'slow', function() {
        console.log($(this).attr('style'));
        console.log($('.outer').attr('style'));
    });
});