JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<h1>Good</h1>
<div class="good">
    <div class="row">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>
</div>

<h1>Bad</h1>
<div class="bad">
    <div class="row">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>
</div>

CSS

.good {
    width: 100%; /* 100% width is OK */
    min-width: 200px;
    display: table; 
    table-layout: fixed;
}

.good > .row {
    display: table-row;
}

.good > .row > div {
    display: table-cell;
    border: 1px solid blue;
}

.bad {
    width: 100%; /* 100% width is OK */
    min-width: 200px;
    display: table; 
}

.bad > .row {
    display: table-row;
}

.bad > .row > div {
    display: table-cell;
    border: 1px solid red;
    width: 25%; /* any percentage less than 100% should flag alarm bells */
}

JavaScript

/**
    Example of bad layout
*/