JSFiddle - React, Tailwind, and code Playground

HTML

<style>
  th .inner {
    position:relative; height:64px; width:64px; vertical-align:top;
    top:0px;
  }
  th .cl {
    position:absolute;
    bottom:0px;
    width:100%;
  }
</style>
<table>
    <thead>
        <tr>
            <th><div class='inner'>H1 is<br />
                here <div class="cl"><span>[-]</span></div></div></th>
            <th><div class='inner'>H2<div class="cl"><span>[-]</span></div></div></th>
            <th><div class='inner'>H3<div class="cl"><span>[-]</span></div></div></th>
        </tr>
    </thead>
    <tbody>
        <tr><td>a1</td><td>b1</td><td>c1</td></tr>
    </tbody>
</table>

CSS

table{
    background-color: yellow;   
    padding: 1em;
}

td{
    margin: 2px;
}

th
{
    vertical-align: center;
    background-color: gray; 
    text-align: center;
}


.cl{ text-align: center }