JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fleetTable">
    <div class="fleetRow textright">
        <div class="fleetCell">Headline</div> <!-- I would like this to span both columns below but be centered -->
    </div>
    <div class="fleetRow textright">
        <div class="fleetCel;">Cell1</div>
        <div class="fleetCell">Cell2</div>
    </div>
</div>

CSS

#fleetTable{
    display: table;width: 360px;margin: 0 auto;margin-top: 20px;font-size:.875em;float:left;
}
    .fleetRow{display: table-row;}
    .fleetCell{display: table-cell;}
    .fleetCell:first-child{
        display: table-cell;
    text-align:center;
}