Rotate div with It's Content Issue
<p>I would like to make <strong>continuous div - vertical orientation with its content</strong> <code>using CSS</code>. So i used transform: rotation() method. If I have used the following code, its get Overlapped. </p>

<p><strong>Input:</strong> </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;style type='text/css'&gt;
    .container{
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
        margin:10px;
        background-color:#ffceff;       
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class='container '&gt;
       &lt;span&gt;Rotate Me&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class='container '&gt;
       &lt;span&gt;Rotate Me&lt;/span&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>Output:</strong> </p>

<p><a href="https://i.stack.imgur.com/Vj1Kt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vj1Kt.png" alt="div rotation"></a></p>

<p><strong>Expected Output:</strong>
<a href="https://i.stack.imgur.com/EObjE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EObjE.png" alt="expected div"></a></p>

<p>Could anybody suggest the solution for this?</p>

<p><strong>Note:</strong> </p>

<p>If I use <code>display: inline-block</code>, then its not overlapping but the space which is the width of the container is occupying between container after rotation.</p>

<p><a href="https://i.stack.imgur.com/EAfHx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EAfHx.png" alt="display block"></a></p>