JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div class="grid">
  <header class="b">header</header>
  <div class="toolbar y">
    <span>search</span>
    <button id="expand">expand</button>
  </div>
  <div class="sidebar">
    <div class="toolbar r">toolbar: fixed height</div>
    <div class="list g">list: must expand to bottom</div>
  </div>
  <main class="p">main content area</main>
</div>

CSS

.grid {
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(50px, min-content) 1fr;  
  grid-template-columns: 300px;
}


/* horizontal positioning */
.sidebar, .toolbar { grid-column: 1; }  /* Left column */
header, main { grid-column: 2; }       /* Right column */

/* vertical positioning */
header, .toolbar { grid-row: 1; }


/* ------------------ other stuff ---------------- */

.sidebar{
  display: flex;
  flex-direction: column;
}

.sidebar .list { flex: 1; }

/* util colors */
.y { background-color: yellow; }
.r { background-color: red; }
.g { background-color: lightgreen; }
.b { background-color: lightblue; }
.p { background-color: pink; }
.s { background-color: silver; }

JavaScript

const button = document.querySelector('#expand');
const longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis malesuada sem. Etiam mattis metus et elit pretium lacinia id in nulla. Cras egestas diam nec tortor pulvinar vulputate. Nullam elementum porta auctor. Praesent ullamcorper justo eu placerat fringilla. Fusce nec eleifend felis. Quisque neque purus, sagittis nec commodo sed, varius vitae magna. Sed finibus neque a justo tempor faucibus. Duis commodo condimentum efficitur."

button.addEventListener('click', function() {
  const filterEl = document.querySelector('.filter');
  if (filterEl) {
  	filterEl.remove();
    button.innertHTML = "expand";
    return;
	}
  
  const newFilter = document.createElement('div');
  newFilter.classList.add('filter', 's');
  newFilter.innerHTML = longText;
  const toolbar = document.querySelector('.toolbar');
  toolbar.parentNode.insertBefore(newFilter, toolbar.nextSibling);
  button.innertHTML = "collapse";
});