JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
      <div class="left" data-qs="left">Left</div>
      <div class="middle" data-qs="middle">Middle</div>
      <div class="right" data-qs="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;
}

.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;
}

.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');
  });
});