JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="outer">
            outer
            <div id="inner">inner</div>
        </div>
        <p id="out"></p>
    </body>
</html>

CSS

#outer {
    float: left;
    position: relative;
    margin: 25px;
    padding: 15px;
    background-color: lightblue;
    overflow: hidden;
    width: 250px;
    height: 350px;
}

#inner { 
    position: relative;
    width: 150px;
    height: 75px;
    background-color: lightcoral;
    top: -5px;
    padding-top: 100%;
    padding-right: 100%;
    padding-bottom: 100%;
}

#out {
    margin-top: 25px;
    float: left;
}

JavaScript

var $outer = $('#outer'),
    $inner = $('#inner'),
    $out = $('#out');

$out.append('width of outer: ' + $outer.width() + '</br>');
$out.append('height of outer: ' + $outer.height() + '</br></br>');
$out.append('top padding of inner: ' + $inner.css('padding-top') + '</br>');
$out.append('top padding of inner: ' + $inner.css('padding-bottom') + '</br>');
$out.append('right padding of inner: ' + $inner.css('padding-right') + '</br>');