JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
    <div class="btn">1</div>
    <div class="btn2">a</div>
</div>
<br>
<div class="foo">
    <div class="btn">2</div>
    <div class="btn2">b</div>
</div>
<br>
<div class="foo">
    <div class="btn">3</div>
    <div class="btn2">c</div>
</div>
<br><br>

CSS

.btn {
    display: inline-block;
    background: #999999;
    width: 40px;
    height: 40px;
    text-align: center;
}

.btn2 {
    display: inline-block;
    background: red;
    width: 20px;
    height: 20px;
    text-align: center;
}

.foo:hover .btn2 { background: green; }