Rotate a div next to a floated div

Question

I have this layout: (also a 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>

I am trying to get the .rotate div to be right next to the .left div, however I can't.

I've tried...

• float the rotated div left as well (in the code snippet), but it takes up the width as if it wasn't rotated.
• adding position:absolute and left:0, but then that overlaps the content

How do I get a div to rotate alongside a left-floated div?

Answer 1

Just change the transform-orgin of the rotated div and also remove the translate from that element.

.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>