<div id="grid">
  <div id="left"></div>
  <div id="right"></div>
</div>
/* ignore */
body {
  margin: 0;
}

#grid {
  height: 100vh;
}

#left {
  background: crimson;
}

#right {
  background: navajowhite;
  border: 3rem solid rgb(0 0 0 / 10%);
}

/* the magic */
#grid {
  transition: 300ms;
  display: grid;
  grid-template-columns: 48px auto;
}

#grid:has(#left:hover) {
  grid-template-columns: 30% auto;
}
/* magic + CSS variable */
#grid {
  transition: 300ms;
  display: grid;
  grid-template-columns: var(--left, 48px) auto;
}

#grid:has(#left:hover) {
  --left: 30%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.