title: How to rotate text and position it properly? (CSS, HTML)
body: <p>I am trying to position a rotated headline next to some text. Statically it works very easy with absolute positioning (left picture). I have, however, difficulties when the page gets resized and the positioning fails (right picture).</p>
  <p><img src="https://i.stack.imgur.com/V58eX.png" alt="Relative positioning" />
  <img src="https://i.stack.imgur.com/FqC9Y.png" alt="Fails when you resize" /></p>
  <p><strong>Current CSS (can be changed):</strong></p>
  <pre><code>.headline {
    white-space: nowrap;
    position: absolute;
    top: 185px;
    left: -20px;
    transform: rotate(270deg);
  }
  </code></pre>
  <p><strong>Current HTML structure (can be changed):</strong></p>
  <pre><code>&lt;header&gt;
      &lt;h1 class=&quot;headline&quot;&gt;Über mich&lt;/h1&gt;
  &lt;/header&gt;
  &lt;div class=&quot;text&quot;&gt;
    &lt;p class=&quot;introduction&quot;&gt;....&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How can I position the element so that I always stays <code>20px</code> next to the paragraph?
  Could someone link me to existing patterns how to solve this?</p>
  <p>A solution with JS (and jQuery) would an option, I would, however, obviously prefer CSS.</p>