JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="xtrawide">
        &nbsp;
    </div>
    <div class="col clearfix">
        <div class="wide">&nbsp;</div> 
        <div class="fixed">&nbsp;</div><div class="auto">&nbsp;</div>
    </div>
    <div class="col clearfix">
        <div class="wide">&nbsp;</div> 
        <div class="fixed">&nbsp;</div>
        <div class="auto">
            <div class="truncate">Den her tekst er meget, meget lang.... ..sdgfsdgkjdsglkjdsjdsgds lklkdsjglkds jglkdsjg dsglkdsj lkgdsjlkg dsjlkgs jdlkjglkds jglkdsg jlkdsjglkds jgds gds gjdsglkjs ds g</div>
        </div>
    </div>
    <div class="col clearfix">
        <div class="wide">&nbsp;</div> 
        <div class="fixed">&nbsp;</div><div class="auto">&nbsp;</div>
    </div>    
</div>

CSS

table {
    width: 100%;
}
.xtrawide { 
    border: 1px solid yellow;
}
.wide {
    border: 1px solid green;
}
.fixed {
    border: 1px solid red;
    width: 50px;
    float: left;
}
.auto
{
    display: table-cell;
    width: 1000000px;
    border: 1px solid blue;
}

.col {
    width: 33.3333333%;
    float: left;
}

*, *:before, *:after {
   -moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
        box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

.truncate
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}