JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="table-fixed-wrapper">
    <div class="table-fixed">
        <div>sdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsdsdfsfsdfsdfsdfsfsd</div>
        <div>sdfsdf</div>
    </div>
</div>

CSS

.table-fixed {
    border: 1px solid black;
    display: table;
    table-layout: fixed;
    border-spacing: 35px 0;
    min-width: 805px;
    max-width: 1205px;
    width: 100%;
}

.table-fixed div {
    color: white;
    background-color: blue;
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-fixed-wrapper {
    max-width: 1205px;
}

JavaScript

/**
    two column layout with equal width and text overflow
*/