title: Rotated text inside div overlaps
body: <p>So I will try my best to explain the situation here.
  I want to rotate some text inside a div without letting its edges to show outside the div. I want something like in the attached image: <a href="https://i.stack.imgur.com/EMYAL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EMYAL.png" alt="result image"></a></p>
  
  <p>What I am currently getting is something like this: <a href="https://i.stack.imgur.com/tke3m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tke3m.png" alt="current"></a></p>
  
  <pre><code>&lt;aside&gt;
      &lt;h2&gt;Greeting&lt;p&gt;s&lt;/p&gt;&lt;/h2&gt;
      &lt;div class="text"&gt;
        &lt;p&gt;
          text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/aside&gt;
  
  aside{
    width: 20%;
    display: inline-block;
    vertical-align: top;
    background-color: rgba(151, 0, 0, 0.76);
    height: 71.3em;
    float: left;
    text-align: center;
  
    h2{
      color: black;
      font-family: 'Kaushan Script', cursive;
      position: relative;
      top: 1em;
      font-size: 2em;
      display: inline-block;
      transform: rotate(15deg);
      &amp;:first-letter{
        font-size: 3em;
      }
      p{
        display: inline;
        font-size: 2em;
      }
    }
  
    .text{
      position:relative;
      top: 3em;
  
      p{
        font-size: 2em;
        color: black;
        font-family: 'Kaushan Script', cursive;
        transform: rotate(15deg);
      }
    }
  }
  </code></pre>