Как повернуть линии часов на 90 градусов в CSS и поместить текст перед ним?

Question

У меня есть следующая структура CSS, которая немного сложнее. Полный код помещен в этот JSFiddle, и я борюсь с последней мыслью, которую мне нужно реализовать там.

Между горизонтальными линиями (которые находятся на одной линии с кругами) мне нужно было бы повернуть дополнительную линию (и) на 90 градусов и немного текста перед ней. Это должно выглядеть примерно так, как на этой картинке, где я добавил недостающие элементы красным цветом.

Я уже пытался реализовать что-то вроде этого, как в скрипте по ссылке выше, но это не работает, как ожидалось. Обратите внимание, что в HTML также есть некоторый встроенный CSS, который является динамическим и генерируется во время выполнения.

В качестве примечания я попытался добавить этот новый элемент HTML, но я бы предпочел не использовать встроенный стиль для добавления этих строк (если это возможно). Вот CSS и HTML для вновь добавленных элементов:

.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

Я надеюсь, что это может помочь:

.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

Вы можете использовать следующий код для решения вашей проблемы:

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