Поворот DIV рядом с перемещаемым DIV

Question

У меня есть этот макет: (также JSFiddle here)

.rotate { 
 
    transform: rotate(270deg) translate(-10em, 0); 
 
    transform-origin: 0 0; 
 
    float: left; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<div class='rotate'> 
 
    Rotated 
 
</div> 
 
<div class='left'> 
 
    Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> 
 
</div>

Я пытаюсь получить .rotate DIV быть рядом с .left DIV , однако я не могу.

Я пытался ...

• поплавок повернутый ДИВ влево, а также (в фрагменте кода), но он занимает ширину, как если бы он не вращался.
• добавления position:absolute и left:0, но потом, что перекрывает содержание

Как получить DIV вращаться вместе с левым плавали DIV?

Answer 1

Просто измените transform-orgin повернутого div, а также удалите translate с этого элемента.

.rotate { 
 
    transform: rotate(270deg); 
 
    transform-origin: 100% 100%; 
 
    float:left; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<div class='rotate'> 
 
    Rotated 
 
</div> 
 
<div class='left'> 
 
    Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> Some content.... 
 
    <br> 
 
</div>