JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one"></div>
<div id="two"></div>

CSS

#one {
    background-color: blue;
    width: 50px;
    height: 50px;
    float: left;
}
#two {
    background-color: red;
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 100px;
}
#one:hover, #one:hover ~ #two, #two:hover {
    background-color: yellow;
}
#two:before {
    content:'';
    display:none;
    width:50px;
    height:50px;
    margin-left:-150px;
    background-color: yellow;
}
#two:hover:before {
    display:block;
}