JSFiddle - React, Tailwind, and code Playground

HTML

<table class="parentTable">
    <tr>
        <td class="header" colspan="3">&nbsp;</td>
    </tr>
    <tr>
        <td>
            <table class="childTable">
                <tr>
                    <td>
                        <p class=" entityHeader">Study Title</p>
                    </td>
                    <td>
                        <p>row 1, cell 2</p>
                    </td>
                </tr>
                <tr>
                    <td><p class=" entityHeader">Start Date</p></td>
                    <td><p >row 2, cell 2</p></td>
                </tr>
            </table>
        </td>
        <td class="spec">
            &nbsp;
        </td>
        <td>
            <table class="childTable">
                <tr>
                    <td ><p class=" entityHeader">Project Type</p></td>
                    <td><p >row 1, cell 2</p></td>
                </tr>
                <tr>
                    <td><p class=" entityHeader">Project Subtype</p></td>
                    <td><p >row 2, cell 2</p></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

.parentTable{
    width: 100%;
    border: 1px solid #b4b4b4;
}
.parentTable tr td{
    padding: 5px 30px;
}
.parentTable tr td.header{
    background: #265ca5;
}
.parentTable tr td.spec{
    width: 1px;
    padding: 0;
    border: none;
    background: #b4b4b4;
}
.childTable{
    width: 100%;
}
.childTable tr td{
    border-bottom: 1px dashed;
}
.childTable tr:last-child td{
    border: none;
}