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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.