JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
    <div class="two"><div>
    <div class="three"><div>
</div>

CSS

.one {
    float: left;
}
.one:hover .three {
    background: #000;
}
.two {
    width: 150px;
    height: 200px;
    float: left;
    background: blue;
}
.three {
    width: 50px;
    height:200px;
    float: left;
    background: green;
}
.three:hover {
    background: orange;
}