JSFiddle - React, Tailwind, and code Playground
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div class='left'>LastEditor</div>
<div class='right'>LastModified</div>
</div>
</div>
<div class='row'>
<div class='cell overflow'>
here is some moreSomething quite long overflow that should exceed the table cell.Something quite long that should exceed the table cell.
</div>
</div>
</div>
CSS
.table{
margin:0;
padding:0;
display:table;
table-layout: fixed;
width:100%;
max-width:100%;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
border:1px solid grey;
}
.cell.overflow{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.left{
float:left;
}
.right{
float:right;
}