JSFiddle - React, Tailwind, and code Playground

by Matthew Mendez

HTML

<div id="div1">
    <div id="div2">
        <p>Hello World!</p>
    </div>
</div>

<span id="span1">
</span>
<br>
<span id="span2">
</span>
<br>
<span id="span3">
</span>

CSS

#div1
{
    display: table;
    height: 100px;
}

#div2
{
    display: table-row;
    height: 75px;
}

JavaScript

$("document").ready(function() {
        
    $('#span1').text(pos() + ' positioning height: ' + $('#div2').height());
    $('#div2').css({position: 'absolute'});
    $('#span2').text(pos() + ' positioning height: ' + $('#div2').height());
    $('#div2').css({position: 'static'});
    $('#span3').text(pos() + ' positioning height: ' + $('#div2').height());
    
    function pos() {
        return $('#div2').css('position');
    }
    
});