javascript - How to make a rotated element height:100% of its parent?

Question

I am looking to create a division with border like the following PNG

I have planned to make an ::after element with the following dimensions:

width=height of the parent division;
height=1.5em;

The following is the code works fine but the width of the ::after element is not right...

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 & 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 */
}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
  50
</div>

Answer 1

You weren't taking into account the parent element's padding which needs to be added back in. That can be done with the CSS calc() function. This solution is still a bit static though.

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;
  
  /* Add back the top/bottom padding of the parent (plus .1em for rounding) */
  width: calc(100% + .9em);
  
  transform: rotate(-90deg);
  left: 39%;
  top: 42.1%;
  /*The values of left, top have been assigned by trial & 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 */
}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
  50
</div>