JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
      <div data-qs="left" class="left">Left</div>
      <div data-qs="middle" class="middle">Middle</div>
      <div data-qs="right" class="right">Right</div>
    </div>
    <button data-slide="left">Toggle left
    </button>
      <button data-slide="right">Toggle right
    </button>

CSS

.box {
  display: flex;
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  outline: 3px solid red;
  gap: 10px;
}

.left,
.middle,
.right {
  overflow: hidden;
  flex: 1 1 30%;
  transition: 0.5s linear;
  padding: 10px;
}

.left {
  background-color: yellow;
}

.middle {
  flex-basis: 40%;
  background-color: green;
}

.right {
  background-color: blue;
}

.off {
  flex: 0 0 0;
}

/* компенсация гапов */
.left.off {
  margin-right: -10px;
  padding: 0;
}

.right.off {
  margin-left: -10px;
}

JavaScript

document.querySelectorAll('[data-slide]').forEach(function (elem) {
  elem.addEventListener("click", function () {
  console.log(`[data-slide=${this.dataset.slide}]`);
  	 document.querySelector(`[data-qs=${this.dataset.slide}]`).classList.toggle('off');
  });
 });