JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- table cell example -->
<!-- This example shows how a cell can be responsive when other cells are removed. something in the lines of that -->

<div class="wrapper">
    <div class="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div class="two">two two two two two two</div>
    <div class="three">three</div>
</div>

<div class="wrapper">
    <div class="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div class="two">two two two two two two</div>
</div>

CSS

/**table cell**/
		
.wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100px;
    background-color: Gray;
}

.wrapper div {
    display: table-cell;
    height: 100px;
}

.one {
    background-color: green;
}

.two {
    background-color: blue;
}

.three {
    background-color: red;
}