JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lp-ctnr">
    <div id="filters" onclick="toggle()">FILTERS</div>
    <div class="list-container">
    
    <div id="pdt">PDT</div>
    <div id="list">LIST</div>
        </div>

  </div>

CSS

#lp-ctnr{
  display: flex;
  flex-direction: column;
  border: 1px solid green;
  height: 550px;
  width: 350px;
  margin: auto;
}
#filters{
  width: 100%;
  background: lightgreen;
}
.close{
  height: 20px !important;
}

#pdt{
  flex-grow: 1;
  background: yellow;  
}
#list{
  flex-grow: 1;
  background: pink;
}

.list-container {
  flex-grow: 1;
  border: 1px solid blue;
  text-align: center;
  display: flex;
  flex-direction: row;
}

JavaScript

toggle = function(){
  document.querySelector('#filters').classList.toggle('close')
}