<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(2, max-content);
}

.box {
  width: 50px;
  height: 50px;
  background: #ff3333;
  transition: width 0.2s ease-in-out;
}

.box:hover + .box + .box {
  width: 150px;
}