JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
    <style type="text/css">
    body{
        font-family:Arial,Helvetica,sans-serif;
        font-size:60px;
    }
    .td_wpn_list{
        text-align:right;                   background:silver;
        padding-left: 3px;
        padding-right: 3px;
        /*white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;*/
    }
    </style>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

<table style="width:100%;background:navy;">
    <tr>
        <td class="td_wpn_list">a</td>
        <td class="td_wpn_list">b</td>
        <td class="td_wpn_list">c</td>
        <td class="td_wpn_list">d</td>
    </tr>
    <tr>
        <td class="td_wpn_list">a</td>
        <td class="td_wpn_list">b</td>
        <td class="td_wpn_list">c</td>
        <td class="td_wpn_list">d</td>
    </tr>
    <tr>
        <td class="td_wpn_list">a</td>
        <td class="td_wpn_list">

            <div style="display:inline;float:left;width:100%;       background:green;">
                <div style="height:20px;background:#905F3D; width:50%;"></div>
                <div style="height:20px;background:#6FA0C2; width:33%;"></div>
            </div>
            <div style="display:inline;         background:gold;">1234567890</div>

        </td>
        <td class="td_wpn_list">c</td>
        <td class="td_wpn_list">d</td>
    </tr>
    <tr>
        <td class="td_wpn_list">a</td>
        <td class="td_wpn_list">b</td>
        <td class="td_wpn_list">c</td>
        <td class="td_wpn_list">d</td>
    </tr>
    <tr>
        <td class="td_wpn_list">a</td>
        <td class="td_wpn_list">b</td>
        <td class="td_wpn_list">c</td>
        <td class="td_wpn_list">d</td>
   ...