Monthly <input type="checkbox"> Yearly
<div class="cont">
<div class="d1"></div>
<div class="d2"></div>
</div>
.cont {
display: flex;
gap: 1rem;
}
.d1, .d2 {
width: 100px;
height: 100px;
border: 1px solid orange;
}
.d1 {
background: orange;
}
input:checked ~ .cont .d1 {
background: white;
}
input:checked ~ .cont .d2 {
background: orange;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.