JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="runTest();">
 
<div>
    <p>Case1 : There is green div and a positioned yellow div. They both are inline-block elements. The styles for the same are set when the elements renderers are created. They are laid out as expected.</p>
    <div class="filler"></div><div id="expected-positioned"></div>
</div>
<div style="position:absolute;top:100px">
    <p>Case 2: Initially we have inline-block static div(green) and a block div(yellow). After the page is loaded we change the yellow div to display:inline-block and position:absolute. Now the divs should be laid out identical to the ones above. However this is not the case. This is the bug.</p>
    <div class="filler"></div><div id="bug-positioned" class="filler2"></div>
</div>
</body>

CSS

.filler{
       width:50px;
       height:20px;
       display:inline-block;   
       background:green;        
    }
        #expected-positioned {
       width:50px;
       height:20px;
       display:inline-block;   
       background:yellow;
       position:absolute;
    
}

.bug-positioned {
       background:yellow; 
       position:absolute;
       display:inline-block;
}
 .filler2{
       width:50px;
       height:20px;
       display:block;   
       background:yellow;        
    }

JavaScript

function runTest(){
    var x = document.getElementById('bug-positioned');
    x.className += ' bug-positioned'
    return 0;
    }