JSFiddle - React, Tailwind, and code Playground

by xuxing

HTML

<div id="table1">
    <div id="table1_column"></div>
</div>
<div id="table2">
    <div id="table2_column"></div>
</div>
<div id="table3">
    <div id="table3_column"></div>
</div>

<div id="div1">Hello, this is a test</div>
<div id="div2">Hello, this is a test</div>
<div id="div3">Hello, this is a test</div>

CSS

#table1 { border: 1px solid #000; display: table;}
#table1_column { 
    inline-size: 40px;
    min-inline-size: 50px;
    max-inline-size: 100px;
    height: 100px;
    background-color: red;
    display: table-cell;
}
#table2 { border: 1px solid #000; display: table;}
#table2_column {
    inline-size: 100px;
    min-inline-size: 50px;
    max-inline-size: 100px;
    height: 100px;
    background-color: blue;
    display: table-cell;
}
#table3 { border: 1px solid #000; display: table;}
#table3_column {
    inline-size: 120px;
    min-inline-size: 50px;
    max-inline-size: 100px;
    height: 100px;
    background-color: green;
    display: table-cell;
}

#div1 { 
    inline-size: 40px;
    min-inline-size: 50px;
    max-inline-size: 100px;
    border: 1px solid #000;
}
#div2 { 
    inline-size: 100px;
    min-inline-size: 50px;
    max-inline-size: 100px;
    border: 1px solid #000;
}
#div3 { 
    inline-size: 120px;
    min-inline-size: 50px;
    max-inline-size: 100px;
    border: 1px solid #000;
}