JSFiddle - React, Tailwind, and code Playground

by RichardTowers

HTML

<html>
  <body>
      <button>Clicky</button>              
    <div id="red">
      This div is 200x800.
      <div id="blue">
        This div has top-margin of 10% and left-margin of 10% with respect to its parent.
      </div>
    </div>
  </body>
</html>

CSS

#blue {
    border: 1px solid blue; margin: 10% 0 0 10%;
}
#red {
    border: 1px solid red;
    margin: 0;
    padding: 0; width: 200px; height: 800px;
}

JavaScript

$('button').click(function () {
    $('#blue').text('The height of an element changes depending on the content, while the width ususally does not. If margins etc. were based on height, they would be much more volatile.');
});