JSFiddle - React, Tailwind, and code Playground

by hito

HTML

<div class="box">
    <div id="test1" class="left">content 1</div>
    <div id="test2" class="right">content 2</div>
    <div id="test3" class="last">content 3</div>
</div>

CSS

.box {display:-webkit-box;-webkit-box-orient:horizontal;width:400px;border:green 1px solid;}
.left, .right,.last {border:1px solid red;padding:0 5px;}
.right {-webkit-box-flex:1;}
.last {-webkit-box-flex:1;}
.box:hover { background:rgba(0,0,0,.5)}
.box:hover div[id~="test"] {color:#fff}