jacob_frankovic's questions

.test123 {
  grid-template-columns: 255px 255px;
  transition: 200ms;
  display: grid;
  gap: 30px;
  .card {
    border-radius: 50px;
    border: 1px solid #BBD0FB;
  }
  .c1 {
    background-color: red;
    width: 100%;
    height: 100px;
  }
  .c2 {
    background-color: blue;
    width: 100%;
    height: 100px;
  }
}
.test123:has(:nth-child(1):hover) {
  grid-template-columns: 1fr 255px;
}
.test123:has(:nth-child(2):hover) {
  grid-template-columns: 255px 1fr;
}

<div class="test123">
        <div class="card c1"></div>
        <div class="card c2"></div>
</div>