JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
</div>

CSS

#top {
    background-color: red;
    width: 200px;
}
#left {
    width: 200px;
    opacity: 0;
}
#right {
    text-align: right;
    width: 200px;
    opacity: 0;
}



#left:hover,
#left:hover ~ #right,
#right:hover {
    background-color: rgba(0, 150, 150, 0.4);
    opacity: 1;
}

JavaScript

$(document).ready(function() {
    $('#right').hover(function() { 
        $('#left').css({'background-color': 'rgba(0, 150, 150, 0.4)',
                        'opacity': '1'});
    }, function(){
        $('#left').css({'background-color': '',
                        'opacity': ''});
    });
});

/*$(document).ready(function(){
  $("#right").hover(function(){
    $("#left").css("background-color","yellow");
    },function(){
    $("#left").css("background-color","pink");
  });
});
*/