JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<table cellspacing="0">
    <thead>
        <tr>
            <th>hello</th>
            <th>
                <span id="span1">world</span>
            </th>
        </tr>
    </thead>
</table>

<br>
    
<table cellspacing="0">
    <thead>
        <tr>
            <th id="th2">
                <span id="span2">john</span>
                <ul>
                    <li>name</li>
                    <li>age</li>
                </ul>
            </th>
            <th id="th3">
                <span id="span3">john</span>
                <div id="div1">
                    <div id="span4">rissone</div>
                    <div id="span5">gianna</div>
                    <div id="span6">lou</div>
                </div>
            </th>
        </tr>
    </thead>
</table>

CSS

table, th, td{
}
th{
    border: 1px solid black;
    height: 50px;
    width: 100px;
    background: lightblue;
}
th:first-child{
    vertical-align: top;
}
#span1{
    display: table-cell;
    vertical-align: bottom;
    background-color: pink;
}
#th2{
    width: 200px;
}
#span2, #span3{
    float: left;
    background-color: yellowgreen;
}
#span2{
    /*display: none;*/
}
ul {
    width: 60px;
    background: yellow;
}
#span4,#span5,#span6{
    background: orange;
}
#div1{
    display: inline-block;
}