<div class="example">
  <p>The <code>padding-top</code> is set to <code>25%.</code></p>
  <p>The <code>height</code> is set to <code>200px.</code></p> 
  <p>The computed <code>padding-top</code> is <code class="calculated"></code>.</p> 
  <p>Wouldn't <code>50px</code> make more sense?</p>
    
</div>

.example {
  height: 200px;
  padding-top: 25%;
  
  background: lightblue;
  width: 300px;
  margin: 0 auto;
}

code {
  background: rgba(black, .1);
}

const example = document.querySelector('.example');
const calculated = document.querySelector('.calculated');

let paddingTop = getComputedStyle(example).paddingTop;
calculated.textContent = paddingTop;

window.onresize = function(event) {
  paddingTop = getComputedStyle(example).paddingTop;
  calculated.textContent = paddingTop;
};