JSFiddle - React, Tailwind, and code Playground

by Gueorgui Paniagua

HTML

<div> 
<div class="table">     
      <div class="tr">
        <div class="td">
            <div>Test1</div>
        </div>
        <div class="td2">
           <div></div>
        </div>        
    </div>

     <div class="tr">        
        <div class="td">
          Test2
        </div>
        <div class="td2">
          
        </div>                
      </div>
    
    <div class="tr">        
        <div class="td">
          <div class='table2'>
            <div class='row'>    
                <div class='cell1'>    
                    cell1
                </div>
            <div class='cell2'>    
                cell2
            </div>
           <div class='cell'>    
            cell3cell3cell3cell3cell3cell3cell3cell3cell3cell3
        </div>
    </div>
    
    <div class='row'>    
    <div class='cell1'>    
        cell1
    </div>
    <div class='cell2'>    
        cell2
    </div>
    <div class='cell'>    
        cell3
    </div>
</div>
    
</div>                                                           
        </div>
        <div class="td2">
          
        </div>                
      </div>
    </div>

</div>

CSS

.table {
  display: table;
  width: auto;
}
.tr {
  display: table-row;
  width: auto;
}
.td {
  display: table-cell;
  width:auto;
  border: 2px dashed #f0f;
}

.td2 {
  display: table-cell;
  width:100%;
  border: 2px dashed #f0f;
}



.main{
    width:220px;
}
.table2{
    display:table; 
    table-layout:auto;
}
.row{
    display:table-row;
}
.cell{
    display:table-cell;
    width:auto;
    border: 2px dashed #40f;
   
}

.cell1{
    display:table-cell;
    width:100px;
    min-width:100px;
    border: 2px dashed #40f;    
}

.cell2{
    display:table-cell;
    width:100px;
    min-width:100px;
    border: 2px dashed #40f;    
}