JSFiddle - React, Tailwind, and code Playground

HTML

<table class="blauw">
    <thead>
    <tr>
        <th>Lange tekst die niet in een cel past</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>tekst 1</td>
        <td>Tekst 2</td>
    </tr>
    </tbody>
    <table>

<table class="rood">
    <thead>
    <tr>
        <th>Lange tekst die niet in een cel past</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>tekst 1</td>
        <td>Tekst 2</td>
    </tr>
    </tbody>
    <table>

CSS

table{
    table-layout:fixed;
    white-space:nowrap;
    width:130px;
    float:left;
    margin-left:10px;
}

th,
td{
    width:50%;
    overflow:hidden;
    color:white;
    text-align:center;
}

td{
    font-weight:bold;
}

.blauw th,
.blauw td{
    background-color:blue;
}

.rood th,
.rood td{
    background-color:red;
}