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-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;
  height: 45px;
}
.close{
  height: 20px !important;
}
#pdt, #list {
  flex: 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')
}