JSFiddle - React, Tailwind, and code Playground

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);  
  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;
  height: 100px;
}

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

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

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