title: How to grow rotated text with tailwind css
body: <p>I have this html example:</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;div class=&quot;h-screen&quot;&gt;
      &lt;div class=&quot;absolute inset-0 -z-1 bg-black&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;flex flex-col text-white h-screen&quot;&gt;
        &lt;div class=&quot;flex justify-between h-full&quot;&gt;
          &lt;div class=&quot;flex flex-col justify-between space-y-5 w-24&quot;&gt;
            &lt;div class=&quot;h-2/3 bg-red-300&quot;&gt;
              &lt;div class=&quot;block origin-left-top transform -rotate-90&quot;&gt;
                SUBSCRIBE AND CANCEL ANYTIME ANYWHERE
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;flex flex-col items-center space-y-5&quot;&gt;
              &lt;div class=&quot;pb-5&quot;&gt;
                &lt;button
                  class=&quot;border-white flex items-center justify-center border-2 w-10 h-10&quot;
                &gt;
                  &lt;i-uil-comment-alt-dots /&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;mid&lt;/div&gt;
          &lt;div class=&quot;w-24&quot;&gt;right&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>I would like text to look it like this:</p>
  <p><a href="https://i.stack.imgur.com/t27Bu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/t27Bu.png" alt="desired text look" /></a></p>
  <p>but for some reason it does not take all space, like this:</p>
  <p><a href="https://i.stack.imgur.com/7UHeu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7UHeu.png" alt="enter image description here" /></a></p>