JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#lp-ctnr{
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
  justify-content: space-between;
  /* align-content: flex-start; */
  /* align-items: stretch; */
  border: 1px solid green;
  height: 250px;
  width: 350px;
  margin: auto;
}
#filters{
  width: 100%;
  background: lightgreen;
  /* flex-basis: 45px; */
}
.close{
  height: 20px !important;
}
#pdt, #list {
  /* width: 20px; */
  /* display:inline-block; */
  /* width: 50%; */
  /* flex: 1; */
  flex-grow: 1;
  border: 1px solid blue;
  text-align: center;
  /* align-self: stretch; */
  
}
#pdt{
  background: yellow;  
}
#list{
  background: pink;
}

JavaScript

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