JSFiddle - React, Tailwind, and code Playground

HTML

<div class="geniusPicks">
    <table cellpadding="1" cellspacing="0">
        <tr>
            <th>Sport</th>
            <th>Status</th>
            <th>Pick</th>
            <th>Genius</th>
            <th>Genius Credential</th>
            <th>Result</th>
        </tr>
        
        <tr class="bigGap">
            <td colspan="6"></td>
        </tr>
        
        <tr>
            <td colspan="6" class="pickHeading">MLB Moneyline: New York Yankees vs. Boston Red Sox (make your pick now)</td>
        </tr>
        
        <tr>
            <td>tbd</td>
            <td>tbd</td>
            <td>How to split this cell vertically?</td>
            <td>tbd</td>
            <td>tbd</td>
            <td>tbd</td>
        </tr>
        
        <tr class="smallGap">
            <td colspan="6"></td>
        </tr>
    </table>
</div>

CSS

.geniusPicks {}
.geniusPicks table {width:100%; font-size:12px;}
.geniusPicks table th, tr, td {border:1px solid;}
.geniusPicks table th {background-color:red; height:30px;}
.geniusPicks table tr td.pickHeading {}

.bigGap td {height:19px;}
.smallGap td {height:10px;}