JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="container">
  <div class="header">
    <h3>HEADER TEXT LINE LONG THINGY</h3>
    <div class="actions">
      <a class="btn">BTN</a>
      <a class="btn">BTN</a>
    </div>
  </div>
  <div class="content">
  <ul class="list-items">
<li data-key="ADMINISTRATIE_CD_ADMINISTRATIE!#!BESTEL_NR" data-id="60!#!30752" data-url="/BESTELLING_TE_ONTVANGEN/SRGroups" data-entity="BESTELLING_TE_ONTVANGEN" class="active focus" tabindex="0" data-updatable="Y">
<h3 data-key="'BESTEL_NR'" data-value="30752">30752</h3>
<span class="secondary"> TU</span>
</li>
<li data-key="ADMINISTRATIE_CD_ADMINISTRATIE!#!BESTEL_NR" data-id="60!#!30754" data-url="/BESTELLING_TE_ONTVANGEN/SRGroups" data-entity="BESTELLING_TE_ONTVANGEN" tabindex="1">
<h3 data-key="'BESTEL_NR'" data-value="30754">30754</h3>
<span class="secondary"> TU</span>
</li>
<li data-key="ADMINISTRATIE_CD_ADMINISTRATIE!#!BESTEL_NR" data-id="60!#!30759" data-url="/BESTELLING_TE_ONTVANGEN/SRGroups" data-entity="BESTELLING_TE_ONTVANGEN" tabindex="2">
<h3 data-key="'BESTEL_NR'" data-value="30759">30759</h3>
<span class="secondary"> TU</span>
</li>
<li data-key="ADMINISTRATIE_CD_ADMINISTRATIE!#!BESTEL_NR" data-id="60!#!30776" data-url="/BESTELLING_TE_ONTVANGEN/SRGroups" data-entity="BESTELLING_TE_ONTVANGEN" tabindex="3">
<h3 data-key="'BESTEL_NR'" data-value="30776">30776</h3>
<span class="secondary"> OVERTOOM</span>
</li>
<li data-key="ADMINISTRATIE_CD_ADMINISTRATIE!#!BESTEL_NR" data-id="60!#!30794" data-url="/BESTELLING_TE_ONTVANGEN/SRGroups" data-entity="BESTELLING_TE_ONTVANGEN" tabindex="4">
<h3 data-key="'BESTEL_NR'" data-value="30794">30794</h3>
<span class="secondary"> VAN DIJK</span>
</li>
<li data-key="ADMINISTRATIE_CD_ADMINISTRATIE!#!BESTEL_NR" data-id="60!#!30795" data-url="/BESTELLING_TE_ONTVANGEN/SRGroups" data-entity="BESTELLING_TE_ONTVANGEN" tabindex="5">
<h3 data-key="'BESTEL_NR'" data-value="30795">30795</h3>
<span class="secondary"> SOLITEE</span>
</li>
<li...

CSS

.container{

  display:flex;
  flex-direction:column;
 width:40%;
 border:1px solid red;
 height:80vh;
}

.header{
  position:relative;
  display:flex;
  flex:0 0 auto;
  flex-direction:row;
  background-color:#999;
  align-items:center;
  min-width:0;
}

.header h3{
  padding:.25em;
  border:1px solid green;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 
}

.header .actions{  
  display:flex;
  flex:0 0 auto;
}

.actions .btn{
  padding:.4em 1em;
  background-color:#444;
  color:#fff;
  margin:.25em;
}

.content{
  display:flex;
  flex:1 1 auto;
  overflow:auto;
}
.content .list-items{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  
}
.list-items li{
  border-bottom:1px solid #afafaf;
  padding:.25em;
  line-height:1.2;
}