JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
    </div>
<div>
    
<div class="outer2">
    <div class="inner2">
    </div>
<div>

CSS

div.outer, div.outer2 {
    height: 50px;
    width: 600px;
    background-color: blue;
}

div.inner, div.inner2 {
    height: 50px;
    width: 500px;
    background-color: red;
}

div.outer.myanimatedclass {
    width: 300px;
}
div.outer2.myanimatedclass div.inner {
    width: 100px;
}

JavaScript

$('div.outer').toggleClass('myanimatedclass', 1000);
$('div.outer2').toggleClass('myanimatedclass',  1000);