JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th colspan="2">Titel1</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
	    <a href="#">Text1</a>
        </td>
	</tr>
  </tbody>
  <thead>
    <tr>
      <th colspan="2">Titel2</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td class="links">
	    <a href="#">Text2 länger und länger</a>
      </td>
      <td class="rechts">
	    <a href="#">Text3</a>
      </td>
	</tr>
  </tbody>
</table>
<br><br>
<table>
  <thead>
    <tr>
      <th colspan="2">Titel1</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
	    <a href="#">Text1</a>
        </td>
	</tr>
  </tbody>
  <thead>
    <tr>
      <th colspan="2">Titel2</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td nowrap class="links">
	    <a href="#">Text2 länger und länger</a>
      </td>
      <td class="rechts">
	    <a href="#">Text3</a>
      </td>
	</tr>
  </tbody>
</table>

<br><br>   
    
<table class="kruecke">
  <thead>
    <tr>
      <th colspan="2">Titel1</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
	    <a href="#">Text1</a>
        </td>
	</tr>
  </tbody>
  <thead>
    <tr>
      <th colspan="2">Titel2</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td nowrap class="links">
	    <a href="#">Text2 länger und länger</a>
      </td>
      <td class="rechts">
	    <a href="#">Text3</a>
      </td>
	</tr>
  </tbody>
</table>

CSS

table {
    display: inline-block; 
    background-color: #f0f0f0; 
    border: 1px solid #404040; 
    padding: 0 10px
}
td {text-align: center;}
.links, .rechts {width: 50%; border: solid 1px red;}

.kruecke {width: 22em;}