JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table kruecke">
    <div class="caption">
        <div>Titel1</div>
        <div><a href="#">Text1</a></div>
        <div>Titel2</div>
    </div>
    <div class="tbody">
        <div class="tr">
            <div class="td links"> <a href="#">Text2 länger und länger</a></div>
            <div class="td rechts"> <a href="#">Text3</a></div>
        </div>
    </div>
</div>

CSS

.table {
    display:table;
}
.caption {
    display:table-caption;
}
.tbody {
    display:table-row-group;
}
.tr {
    display:table-row;
}
.td, .th {
    display:table-cell;
}

.kruecke, .caption {  border:1px solid; border-width:0 1px 1px 1px; }
.caption { border-width:1px 1px 0 1px; text-align:center; }
.links, .rechts {
    width: 50%;
    border: solid 1px red;
    white-space:nowrap;
    text-align:center;
}
.kruecke {
    width: 22em;
    padding:.25em;
}