JSFiddle - React, Tailwind, and code Playground
HTML
<!-- This will show the title -->
<div class="row" id="flex">
<table class="table-responsive m-t myTable"><tr><td>Hey</td></tr></table>
<div class="header">ADDITIONAL ITEMS:</div>
</div>
<!-- This will not show the title -->
<div class="row" id="flex">
<table class="table-responsive m-t myTable"></table>
<div class="header">ADDITIONAL ITEMS:</div>
</div>
CSS
#flex {
display: flex;
/* Optional, if you want the DIVs 100% width: */
flex-direction: column;
}
.myTable:empty ~ .header {
display:none;
}
.myTable {
min-height: 50px;
background: #444;
color: #fff;
}
#flex > .myTable { order: 2; }
#flex > .header { order: 1; }