JSFiddle - React, Tailwind, and code Playground

HTML

<!-- ViewPanel -->
<div style="height:200px">
    <!-- Main HorizontalPanel -->
    <table border="1" width="100%" height="100%">
        <tr>
            <td align="left" valign="top">
                <!-- WEST: VerticalPanel -->
                <table border="1" width="49%" height="100%">
                    <tr>
                        <td align="left" valign="top">
                            <!-- HTML (reports) -->
                            <div class="text-header1" style="width:100%;height:100%;">
                                Reports
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
            <td align="left" valign="top">
                <!-- EAST: VerticalPanel -->
                <table border="1" width="49%" height="100%">
                    <tr>
                        <td align="left" valign="top">
                            <!-- HTML (charts) -->
                            <div class="text-header1" style="width:100%;height:100%;">
                                Charts
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

CSS

.text-header1 {
    background-color:red;
}