JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainbox">
<p>bla bla bla text</p>
</div>
<br />
<footer id="mainbox" style="height: 77px;">
<div id="mainbox2">
    <p>bla text text</p>
</div>
</footer>

CSS

#mainbox {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 background: red;
 border-radius: 40px;
}

#mainbox:hover {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 margin-left: -5%;
}

#mainbox:hover ~ #mainbox2 {
 margin-left: -5%;
}