JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <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

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

      .left {
        flex: 1 0 30%;
        background-color: yellow;
        transition: 0.5s linear;
      }

      .middle {
        flex: 1 0 40%;
        background-color: green;
        transition: 0.5s linear;
      }

      .right {
        flex: 1 0 30%;
        background-color: blue;
        transition: 0.5s linear;
      }

      .off {
        flex: 0 0 0;
        /* display: none; */
        /* width: 0; */
        /* opacity: 0; */
      }

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