JSFiddle - React, Tailwind, and code Playground

by wasikuss

HTML

<div class='test1'>
    <div></div>
</div>
<div class='test2'>
    <div class='back'></div>
    <div class='top'>
        <div></div>
    </div>
</div>
<button id="trigger">TEST</button>

CSS

.test1
{
  width: 100px;
  height: 100px;
  background-color: red;
  border: 3px solid black;
  margin: 50px;   
  overflow: visible;    
}

.test2
{
  margin: 50px;
}

.test2 .back
{
  width: 100px;
  height: 100px;
  background-color: red;
  border: 3px solid black;
}

.test2 > .top
{
  width: 100px;
  height: 100px;
  border: 3px solid transparent;
  margin-top: -106px;
}

.test1 > div, .test2 > .top > div
{
  width: 20px;
  height: 20px;
  margin: 10px 0 0 -10px;
  background-color: blue;
}

JavaScript

$('#trigger').click(function()
{
    $('.test1, .test2 > .back').animate({width: "+=10px"});
});