JSFiddle - React, Tailwind, and code Playground

by mmerchant

HTML

<div id='page'>
  <div id='blue'>
    <button type='button' id='show'>Show</button>
  </div>
  <div id='red'>
    <button type='button' id='hide'>Hide</button>
  </div>
  <div id='yellow'></div>
</div>

CSS

#page {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  /* grid-auto-flow: column dense; */
}

#blue {
  background-color: lightblue;
  grid-row: 1/span 2;
  grid-column: 1/2;
  z-index: 1;
}

#yellow {
  background-color: yellow;
  height: 100px;
}

#red {
  background-color: red;
  text-align: right;
  grid-column: 1;
  grid-row: 1;
  /* z-index: -1; cant click hide */ 
  /* float: right; */
  /* transform: translateX(0);
  transition: transform 2s; */
  width: 100px;
  transition: width 2s;
}

#red.expanded {
  /* transform: translateX(100%); */
  width: 200px;
  grid-column: 1/span 2;
}

JavaScript

const show = document.getElementById('show');
const hide = document.getElementById('hide');
const red = document.getElementById('red');

show.addEventListener('click', function() {
	red.classList.add('expanded');
});

hide.addEventListener('click', function() {
	red.classList.remove('expanded');
});