JSFiddle - React, Tailwind, and code Playground

by Jeff Davidson

HTML

<div class="header expectedWidth">This is the expected width.</div>
<div class="cardlist">
    <div class="card expectedWidth">
        <div class="caption">This table should be the expected width.</div>
        <div class="tbody">
            <div class="row">
                <div class="cell col1">Subject:</div>
                <div class="cell col2">Some long value that should be truncated at the expected width.</div>
            </div>
            <div class="row">
                <div class="cell col1">Probability:</div>
                <div class="cell col2">50%</div>
            </div>
            <div class="row">
                <div class="cell col1">Elvis:</div>
                <div class="cell col2">Presley</div>
            </div>
            <div class="row">
                <div class="cell col1">42:</div>
                <div class="cell col2">The answer to life, the universe and everything</div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    font-family: Calibri;
}
.expectedWidth {
    width: 300px;
}
.header {
    max-width: 300px;
    background-color: yellow;
    margin-bottom: 4px;
    border-left: 1px dotted red;
    border-right: 1px dotted red;
    text-align: center;
}
.cardlist {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.card {
    border-spacing: 0px;
    padding: 0px;
    display: table;
}
.caption {
    text-align: left;
    background-color: lightgrey;
    display: table-caption;
    width: 100%;
}
.tbody {
    display: table-row-group;
}
.row {
    background-color: grey;
    display: table-row;
}
.cell {
    display: table-cell;
}
.cell.col1 {
    background-color: lightblue;
    padding-right: 4px;
}
.cell.col2 {
    background-color: lightgreen;
}