JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table">
    <div id="table-cell1">table cell 1</div>
    <div id="table-cell2">table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell table cell 2 Table Cell</div>
</div>

CSS

body{margin: 0}
#table{
    display: table;
    width: 100%;
    height: 30px; /* ignored */
}
#table-cell1{
    display: table-cell;
    width: 80px;
    background-color: yellow;
}
#table-cell2{
    display: table-cell;
    background-color: black;
    color: white;
}