JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first"></div>
<div class="second"></div>

CSS

.first{
    width:100px;
    height:100px;
    background:red;
    display:block;
}

.second{
    width:0px;
    height:100px;
    background:blue;
    display:none;
}

JavaScript

$( ".first" ).click(function() {
    $(this).animate({width: 0}, {duration: 2000});
    $(this).hide();
    $('.second').show();
    $('.second').animate({width: 400}, {duration: 1000});
});

$( ".second" ).click(function() {
    $(this).animate({width: 0}, {duration: 1000});
    $(this).hide();
    $('.first').show();
    $('.first').animate({width: 100}, {duration: 1000});
});