JSFiddle - React, Tailwind, and code Playground

by Rob Sedgwick

HTML

<div class="container">
<div class="column1">
    text and text and text and text
    </div>
<div class="column2">
    cakes and cakes and cakes and toast
</div>
<div class="column1">
    <table width="100%">
        <tr><td>pie</td><td>foo</td><td>bar</td></tr>
        <tr><td>left</td><td>center</td><td>right</td></tr>
    </table>
</div>
 </div>

CSS

*{
    padding:0;
    margin:0;
}
div.overflow{
    min-width:700px;
}
div.container{
    width:100%;
}
div.column1, div.column2 {
    float: left;
    max-width:200px;
    padding: 5px;
    background-color:red;
}

div.column2 {
    background-color:lightblue;
}

div.column3 {
    float: left;
    min-width:280px;
    padding: 5px;
    background-color:blue;
    width:calc(100% - 410px);
}

.column3 table {
    table-layout:fixed;
    word-wrap:break-word;
    width:100%;
}

.column3 td {
    white-space: normal;
    word-wrap:break-word;
}