JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullwidth  dispTR" id="filterRow">

  <div class="selectHolder" id="filters"><h1>Filters longer to make tall</h1></div>
  <div class="selectHolder" id="highlight"><h1>Highlight</h1></div>
  <div class="selectHolder" id="granularity"><h1>Group</h1></div>
</div>

CSS

div#filterRow {
  min-height: 80px;
  display: flex;
  border: 2px solid red;

}



div#filterRow div.selectHolder {
  border: 2px solid blue;
  border-right: 0;
  flex: auto;
  height: 100%;
  padding: 10px;
}

div#filterRow div.selectHolder div {
  vertical-align: top;
}

div#filterRow div.selectHolder:last-child {
  border-right: 1px solid lightgray;
}

div#filterRow div h1 {
  margin: 0;
  margin-bottom: 10px;
}

div#filterRow div div {
  margin-right: 5px;
}



div#filterRow div#filters {
  width:800px;
}
div#filterRow div#highlight {
  width:300px;
}
div#filterRow div#granularity {
  width:400px;
}
    
 div.fullwidth { width: 100%; }