Выровнять по горизонтали и вертикали повернутый текст

Question

Я почесал голову в течение нескольких часов из-за этой крошечной проблемы, я хочу центрировать повернутый текст по горизонтали в элементе div, а также выровнять его вертикально вниз, и все должно быть отзывчивым. Мне удалось добиться этого, установив некоторое фиксированное значение, но, как и ожидалось, оно перестанет работать, когда я изменю размер экрана.

Вот мои CSS и HTML:

header {
  position: relative;
  height: 100vh;
}

.left-side {
  position: relative;
  width: 6.04%;
  height: 76.339vh;
  margin-top: 10.714vh;
}

.content {
  position: relative;
  display: inline-block;
  width: 87.92%;
  height: calc(100% - 10.714vh);
  margin-top: 10.714vh;
}

.hero {
  position: relative;
}

img {
  object-fit: cover;
  width: 100%;
  height: 76.339vh;
}

.right-side {
  width: calc(6.04% - 2px);
  position: relative;
  border: 1px solid red;
}

.rotated {
  position: absolute;
  transform: rotate(-90deg) translateY(-150%);
  top: calc(76.339vh - 10.714vh);
}

p {
  white-space: nowrap;
  font-size: 1em;
  line-height: 2em;
  letter-spacing: 1px;
  width: 100%;
}

<link href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" rel="stylesheet" />

<header class="pure-g">
  <div class="left-side">
  </div>
  <div class="content">
    <div class="hero">
      <img src="https://i.picsum.photos/id/830/1680/855.jpg">
    </div>
  </div>
  <div class="right-side">
    <div class="rotated">
      <p>Lorem Ipsum</p>
    </div>
  </div>
</header>

Заголовок разделен на три части, третья - это та, которая содержит этот повернутый текст, который должен всегда центрироваться по горизонтали и выравниваться по вертикали с нижняя часть изображения.

Answer 1

Благодаря подсказке Paulie_D мне удалось решить мою проблему с помощью writing-mode: vertical-lr; и поворота текста только на -180 °.

Фрагмент окончательного кода:

header {
  position: relative;
  height: 100vh;
}

.left-side {
  position: relative;
  width: 6.04%;
  height: 76.339vh;
  margin-top: 10.714vh;
}

.content {
  position: relative;
  display: inline-block;
  width: 87.92%;
  height: calc(100% - 10.714vh);
  margin-top: 10.714vh;
}

.hero {
  position: relative;
}

img {
  object-fit: cover;
  width: 100%;
  height: 76.339vh;
}

.right-side {
  width: 6.04%;
  position: relative;
  height: 76.339vh;
  margin-top: 10.714vh;
}

.rotated {
  position: absolute;
  transform: rotate(-180deg);
  bottom: 0;
}

p {
  writing-mode: vertical-lr;
  white-space: nowrap;
  font-size: 1em;
  line-height: 1em;
  letter-spacing: 1px;
  width: 100%;
}

<link href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" rel="stylesheet" />

<header class="pure-g">
  <div class="left-side">
  </div>
  <div class="content">
    <div class="hero">
      <img src="https://i.picsum.photos/id/830/1680/855.jpg">
    </div>
  </div>
  <div class="right-side">
    <div class="rotated">
      <p>Lorem Ipsum</p>
    </div>
  </div>
</header>

Answer 2

header {
   position: relative;
   height: 100vh;
}

.left-side {
   position: relative;
   margin-left: 5%;
   height: 76.339vh;
   margin-top: 10.714vh;
}

.content {
   position: relative;
   display: inline-block;
   width: 87.92%;
   height: calc(100% - 10.714vh);
   margin-top: 10.714vh;
}

.hero {
   width: 100%;
   position: relative;
   img {
       object-fit: cover;
       width: 100%;
       height: 76.339vh;
   }
}

.right-side {
     margin-right: 5%;
}

.rotated {
 position: absolute;
 bottom: 10%;
 left: 50%;
 transform: translate(-50%, -50%);
       p {
       writing-mode: vertical-lr;
       white-space: nowrap;
       font-size: 1em;
       line-height: 2em;
       letter-spacing: 1px;
       width: 100%;
   }
}

В конце дня я бы не рекомендовал использовать 'absolute' для позиционирования элементов, когда требуется адаптивная страница.

Вместо этого используйте FlexBox, просто воспользуйтесь этой ссылкой легко узнать об этом.