JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<link rel="stylesheet" href="https://rawgit.com/dosandk/5174ebcf3219dcf3e48a/raw/84411cdc9debc71d2953625d53aff53e462913cb/default.css">
<div class="display-table-cell">1</div>
<br>

<div class="display-table t-1 debug">
    <div class="display-table-cell t-c-1-1">213 23 23 213 123 2312 1232 213 232123213  2 3123 123 2132</div>
    <div class="display-table-cell t-c-1-2">3</div>
</div>
<br>    
    
    
 <div class="display-table t-2 debug">
     <div class="display-table-row">
         <div class="display-table-cell t-c-2-1">2</div>
         <div class="display-table-cell t-c-2-2">3</div>
     </div>
     <div class="display-table-row">
         <div class="display-table-cell t-c-2-1">2</div>
         <div class="display-table-cell t-c-2-2">3</div>
         <div class="display-table-cell t-c-2-2">3</div>
     </div>
</div>

SCSS

.display-table-cell {
    width: 40px;
    height: 40px;
    background: grey;
    color: white;
    vertical-align: middle;
    text-align: center;
}
.t-1 {
    width: 200px;
    height: 50px;
}
.t-2 {
    width: 300px;
}
.t-c-1-1 {
    width: 50%;
}
.t-c-1-2 {
    width: 50%;  
}

.t-c-2-1 {
    width: 50%;
}
.t-c-2-2 {
    width: 50%;
}


.debug {
    outline: 1px solid red;
    & * {
        outline: 1px solid greenyellow;
    }    
}