<div class="acc-cblk">
  <input type="radio" name="cblk" id="cblk-1" checked />
  <input type="radio" name="cblk" id="cblk-2" />
  <input type="radio" name="cblk" id="cblk-3" />
  <label for="cblk-1" class="acc-cblk__b" style="--bg: #9c7bd6">
    <span class="acc-cblk__t">Amethyst</span>
    <span class="acc-cblk__d">Royal violet anchor of the system. Use for primary actions.</span>
  </label>
  <label for="cblk-2" class="acc-cblk__b" style="--bg: #d49a5c">
    <span class="acc-cblk__t">Copper</span>
    <span class="acc-cblk__d">Warm metallic accent. Use sparingly for highlights and badges.</span>
  </label>
  <label for="cblk-3" class="acc-cblk__b" style="--bg: #8fb3a3">
    <span class="acc-cblk__t">Sage</span>
    <span class="acc-cblk__d">Cool restorative neutral. Use for success and secondary chrome.</span>
  </label>
</div>

.acc-cblk { display: flex; height: 220px; border-radius: 12px; overflow: hidden; }
.acc-cblk > input { display: none; }
.acc-cblk__b {
  flex: 1; cursor: pointer; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bg); color: #15151d;
  transition: flex .5s cubic-bezier(.3,1,.3,1);
}
.acc-cblk__t {
  font: 800 13px/1 system-ui; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.acc-cblk__d {
  font: 12px/1.55 system-ui; opacity: 0;
  transform: translateY(8px); transition: all .3s .12s;
}
#cblk-1:checked ~ [for="cblk-1"],
#cblk-2:checked ~ [for="cblk-2"],
#cblk-3:checked ~ [for="cblk-3"] { flex: 4; }
#cblk-1:checked ~ [for="cblk-1"] .acc-cblk__d,
#cblk-2:checked ~ [for="cblk-2"] .acc-cblk__d,
#cblk-3:checked ~ [for="cblk-3"] .acc-cblk__d {
  opacity: 1; transform: none;
}