surrounding transformed element with a DIV

Question

I would like to rotate a text element in a DIV, however, after the text rotates my div collapses like it was empty. Is there a css trick to make my DIV still surround my inner element?

here is what my code looks like:

li {
  border: 1px solid black;
  list-style-type: none;
}

p {
  display: inline-block;
  transform-origin: right bottom;
  transform: rotate(270deg);
}

<li>
  <div>
    <p>Some Text</p>
  </div>
</li>

<li>
  <div>
    <p>Some Text</p>
  </div>
</li>

Answer 1

Instead transform:rotate(xdeg); you may use writing-mode to achieve this.

Formal syntax

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Your code revisited: http://codepen.io/gc-nomade/pen/MpNBMa or below

li {
  border: 1px solid black;
  list-style-type: none;
}

p {
  display: inline-block;
  vertical-align: middle;
}

p.rotate {
  writing-mode: vertical-rl;
  /* for obsolete safari old win, add vendor prefix -webkit- */
  writing-mode: tb-rl;
  /* IEs */
  /* writing-mode:sideways-lr; could be the one */
  /* use scale() eventually untill sideways-lr is working everywhere */
  transform: scale(-1);
  padding: 1em;
  background: yellow;
  /* show me */
  max-height:10em; /* will force text to break on several lines if too long */
}

<ul>
  <li>
    <div>
      <p class="rotate">Some Text</p>
      <p>aside <br/>any <br/>other <br/>text <br/>aside <br/>any <br/>other <br/>text </p>
    </div>
  </li>

  <li>
    <div>
      <p class="rotate">Some more Text<br/>over 2 lines</p>
      <p>aside any other text</p>
    </div>
  </li>
  <li>
    <div>
      <p class="rotate">Some more Text over 10em of height at the most</p>
      <p>aside any other text</p>
    </div>
  </li>
</ul>

Note : MDN says :

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Check it out here : http://caniuse.com/#search=writing-mode