JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<table cellspacing="0" cellpadding="0" border="0">
    <thead>
    <tr>
        <th class="th1">
            
                <span class="span1">1
                </span>
                <div class="div1">
                    divd fsdf sdf sdf dsf sd
                </div>
            
        </th>
        <th class="th2">
            
                <span class="span2">2
                </span>
                <div class="div2">
                    <table style="height: 100%">
                    <tr>
                        <td>div2</td>
                    </tr>
                    </table>
                </div>
            
        </th>
    </tr>
    </thead>
</table>

CSS

table, tr, td, th {
    padding: 0px;
    margin: 0px;
}

th {
    display: block;
}

.span1{
    width:24px;
    background-color:red;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
}

.span2{
    width:24px;
    background-color:blue;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    
    
}

.div1{
    background-color:green;
    /*height:200px;*/
    width:100px;
   
}

.div2{
    background-color:green;
    width:100px;
    /*height:100%;*/
   
}


.th1{
    position: relative;
    border: 3px black solid;
    
}

.th2{
    position: relative;
    border: 3px black solid;
}

.divParent{
    position: relative;
    border: 3px #654321 solid;
}