JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mother">
    <div class='a'></div>
<div class='b'></div>
    </div>

CSS

#mother{
    position:relative; width:210px;
    }
        .a {
           width: 80px;
           height: 80px;
           padding: 10px;
           border: 0px solid yellow;
           background-color: red;
           display: inline-block
        }
        
        .b {
           width: 100px;
           height: 100px;
           background-color: blue;
           display: inline-block;
           margin-left: 20px;
           position:absolute; 
           right:0px; 
        }

JavaScript

$('.a').mouseenter(function(){
        $(this).animate({
            'padding': 0,
            'borderWidth': 10
        });
    }).mouseleave(function(){
        $(this).animate({
           'padding': 10,
           'borderWidth': 0
        });
    });