How to rotate a hr lines for 90 degrees in CSS and put a text in front of it?

Question

I'm having the following CSS structure, which is a little complicated. The complete code is placed in the this JSFiddle and I'm struggling with the last think which I need to implement there.

Between the horizontal lines (which are in line with the circles), I would need to have additional line(s) rotated for 90 degrees and to have some text in front of it. It should look something like in this picture, where I have added the missing elements in red.

I have already tried to implement something like this as in fiddle from the link above, but it's not working as expected. Note that there is some inline CSS into the HTML as well, which nature is dynamic and is generated during run time.

As a note, what I tried is adding this new HTML element, but I would prefer to not use inline style for the purpose of adding these lines (if possible). Here is the CSS and HTML for the newly added elements:

.chart .left-line {
  transform: rotate(-90deg);
  display: flex;
  align-items: center;
  position: absolute;
  right: -257px;
  width: 530px;
  z-index: 10;
  top: 245px;
}

.chart .left-line hr {
  width: 100%;
  background: #1d2026;
  opacity: 0.25;
}

.chart .left-line-container {
  width: 100%;
  font-family: Open Sans;
  font-size: 12px;
  color: #1d2026;
  font-weight: 700;
  margin: 0 16px;
  -webkit-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<div class="left-line-container" style="top: 135px;">
  <hr class="left-line-hr"> 12.34
</div>

Answer 1

I hope this could help:

.flex-parent {
  display: flex;
  width: 100%;
  height: 180px;
  align-items: center;
  padding: 50px 0;
  transform: rotate(-90deg);
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #e3e3e3;
  border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  line-height: 150%;
color: #777777;
 letter-spacing: 3px;
}

 <div class="flex-parent">
        <div class="flex-child-edge"></div>
        <div class="flex-child-text">text here</div>
        <div class="flex-child-edge"></div>
      </div>

Answer 2

You can use the following code to solve your problem:

hr{
    width: 1px;
    height: 100%
}