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 class="filter s">filter tools</div>
  </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 ---------------- */

.filter {
  display: none;
}

.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. Mauris tristique commodo quam, luctus ullamcorper sem consequat in.Pellentesque in turpis metus. Mauris pulvinar fringilla augue, at lobortis libero porta ut. Mauris vestibulum venenatis lectus ac lacinia. Suspendisse pharetra accumsan turpis nec cursus. Donec et eleifend augue. Vivamus dolor ligula, mattis ultricies porttitor id, tempor non erat. Vivamus blandit eros convallis, tempor tortor fermentum, efficitur turpis. Mauris mollis, risus at facilisis dignissim, enim ex sollicitudin quam, consequat fermentum ex est efficitur neque. Proin rutrum venenatis purus in dignissim. Ut quam lacus, posuere cursus mattis id, bibendum nec mi. Nam porta semper quam, interdum consectetur erat vestibulum id."

button.addEventListener('click', function() {
  const filter = document.querySelector('.filter');
  const { display } = window.getComputedStyle(filter);

  if (display === "none") {
    filter.style.display = "block";
    filter.innerHTML = longText;
    button.innerHTML = "collapse";
  } else {
    filter.style.display = "none";
    button.innerHTML = "expand";
  }
});