JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<table class="table">
    <tr>
        <td class="a">
            <div class="a-a">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
            </div>
        </td>
        <td class="b">
            <div class="b-b">
                
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore consectetur autem facilis dicta officia omnis inventore numquam ipsam eius iusto perspiciatis magnam possimus necessitatibus quas non amet sint dolorum voluptatum.</p>
                
            </div>
        </td>
    </tr>
</table>

CSS

.table {
    width: 100%;
    
    table-layout: fixed;
    
    border-collapse: collapse;
}
    .table td {
        vertical-align: top;
    
        border: 1px solid  #690000;
    }

    .a {
        width: 20%;
    }
        .a-a {
            min-width: 200px;
        }

    .b {}
        .b-b {
            overflow: auto;
            min-width: 100%;
            white-space: nowrap;
        }