JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainbox1">
    <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, #mainbox1 {
    transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    -ms-transition: .4s;
    background: red;
    border-radius: 40px;
}
#mainbox1 {
    position:relative;
    right:0px;
}
#mainbox {
    position:relative;
    left:0px;
}
#mainbox1:hover {
    transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    -ms-transition: .4s;
    right: 5%;
}
#mainbox1:hover ~ #mainbox {
    transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    -ms-transition: .4s;
    left:20px;
}