title: How to make a rotated element height:100% of its parent?
body: <p>I am looking to create a division with border like the following PNG</p>
  <p><a href="https://i.stack.imgur.com/f0r9e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f0r9e.png" alt="Rotated CSS text" /></a></p>
  <p>I have planned to make an ::after element with the following dimensions:</p>
  <pre><code>width=height of the parent division;
  height=1.5em;
  </code></pre>
  <p>The following is the code works fine but the width of the ::after element is not right...</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    display: flex;
    flex-direction: column;
    height: 93vh;
    justify-content: center;
    align-items: center;
    background: #222;
    color: #eee;
    font-family: "Dosis", sans-serif;
  }
  
  .side-text {
    position: relative;
    font-size: 4em;
    color: #eee;
    background: none;
    padding: 0.4em 0.5em 0.4em 0.3em;
    border: 5px solid #eee
  }
  
  .side-text::after {
    position: absolute;
    content: "Points Needed";
    font-size: 0.25em;
    color: #222;
    background: #eee;
    text-align: center;
    width: 100%;
    /*This takes the value of 100%(Parent's Width) but we need 100%(Parents Height)*/
    transform: rotate(-90deg);
    left: 45%;
    top: 42.5%;
    /*The values of left, top have been assigned by trial &amp; error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000, the values specified above won't work */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" /&gt;
  &lt;div class="side-text"&gt;
    50
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The values of left-margin, top-margin have been assigned by trial &amp; error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000 from 50, the values specified above won't work.</p>