JSFiddle - React, Tailwind, and code Playground

by SoLongTony

HTML

<body>
    
    <div class='absInline leftCol'>01 absInline</div>
    <div class='absInherit leftCol'>02 absInherit</div>
    <div class='absBlock leftCol'>03 absBlock</div>
    <div class='absNone leftCol'>04 absNone</div>
    <div class='relInline leftCol'>05 relInline</div>
    <div class='relInherit leftCol'>06 relInherit</div>
    <div class='relBlock leftCol'>07 relBlock</div>
    <div class='relNone leftCol'>08 relNone</div>
    <span class='absInline rightCol'>09 absInline</span>
    <span class='absInherit rightCol'>10 absInherit</span>
    <span class='absBlock rightCol'>11 absBlock</span>
    <span class='absNone rightCol'>12 absNone</span>
    <span class='relInline rightCol'>13 relInline</span>
    <span class='relInherit rightCol'>14 relInherit</span>
    <span class='relBlock rightCol'>15 relBlock</span>
    <span class='relNone rightCol'>16 relNone</span>

</body>

CSS

.leftCol{
    left:10px;
}
.rightCol{
    left:100px;
}
.absInline{
    position:absolute;
    top:100px;
    display:inline;
}
.absInherit{
    position:absolute;
    top:120px;
    display:inherit;
}
.absBlock{
    position:absolute;
    top:140px;
    display:block;
}
.absNone{
    position:absolute;
    top:160px;
    display:none;
}
.relInline{
    position:relative;
    top:180px;
    display:inline;
}
.relInherit{
    position:relative;
    top:200px;
    display:inherit;
}
.relBlock{
    position:relative;
    top:220px;
    display:block;
}
.relNone{
    position:relative;
    top:240px;
    display:none;
}