JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class='parent'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div id="button" class='btn'>Button</div>
  <div class='third'>3</div>

  <div id="slide" class='slide'>
    <div class='hello'>
    </div>
  </div>
</div>

CSS

.parent {
  display: flex;
  position: relative;
}

.first,
.second,
.third {
  padding: 30px;
}

.first {
  background-color: salmon;
  flex-basis: 120px;
}

.second {
  background-color: yellow;
  flex-grow: 1
}

.third {
  background-color: #56D7F7;
  flex-grow: 1
}

.btn {
  background-color: red;
  cursor: pointer;
}

.slide {
  position: absolute;
  background-color: green;
  width: 40px;
  left: 0;
  top: 0;
  bottom: 0;
}

JavaScript

let open = false;

slide.style.setProperty('transform-origin', 'left top');
slide.style.setProperty('transition', 'linear .4s all');

button.addEventListener('click', (event) => { 
  if (open) {
    slide.style.setProperty('transform', `scaleX(${1})`);
  	open = false;
  } else {
    const first = slide.offsetWidth;
    const last = button.offsetLeft;
    const scale = last / first;
    
    slide.style.setProperty('transform', `scaleX(${scale})`);

    open = true;
  }
})