JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table">
    <div>first</div>
    <div>second second second second second second second second </div>
    <div>third</div>
    <div>fourth</div>
</div>

CSS

body{margin: 0}

#table{
    display:table;
    width:100%;
    table-layout: fixed;
}

#table>div{
    display:table-cell;
}

#table>div:first-child{
    width: 100px;
    background:red;
}

#table>div:nth-child(2){
    width: 100p%;
    background:yellow;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#table>div:nth-child(3){
    width: 100px;
    background:aqua;
}

#table>div:nth-child(4){
    width: 100px;
    background:lightgray;
}