Выровнять (CSS повернутый) элемент слева от его контейнера - HTML / CSS

---

У меня есть серия из 3 SVG-элементов внутри элемента-оболочки, и я повернул эту оболочку на -90 градусов с помощью CSS-преобразования.

Я пытаюсь сделать так, чтобы желтый содержащий блок был закреплен слева от экрана, чтобы затем я мог изменить, как далеко слева (% или vw) находится эта желтая обертка.

Я ни за что на свете не могу заставить его придерживаться левой стороны - трансформация, кажется, делает все намного сложнее. Мне это нужно, чтобы даже при изменении размера окна оно оставалось заданным % (или vw) от крайнего левого угла - для аргументации скажем 5% / 5vw.

P. S Я использую SVG-текст, потому что он является частью анимации пути клипа, но я удалил этот код, чтобы облегчить чтение.

сайт CodePen[^]

Что я уже пробовал:

CSS

body {
  margin: 0; 
  width: 100%; 
  height: 100vh;
  position: relative;
}

#wrapper {
  display: flex;
  justify-content: center;
  background: yellow;
  transform: rotate(-90deg);
  position: absolute;
  left: 0;
}

#wrapper svg {margin: 1rem}
text {font-size: 1rem}

HTML

<!-- THIS IS THE YELLOW BLOCK CONTAINING THE SVG ELEMENTS -->
<div id="wrapper">

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 1</text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 2</text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 3</text>
  </svg>
  
</div>

---