Dynamically Size Elements with Pure CSS

<!--
  For a more advanced use case:
  https://embed.plnkr.co/6fbehgwPjVgWJpLrkym7
-->

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="Box">
      <p>This is my content</p>
    </div>
  </body>

</html>

/* For a more advanced use case:
   https://embed.plnkr.co/6fbehgwPjVgWJpLrkym7
*/

.Box {
  height: 40vh;
  width: 50vw;
  margin: 30vh 25vw;
  background-color: slategray;
}

/* Demo styles only  */
body {
  margin: 0;
}

p {
  padding: 2rem 0 0 2rem;
  font-family: monospace;
  font-size: 2rem;
  color: antiquewhite;
}