How to Rotate Text and have it's Parent Div act Dynamically

I have created a slide out tab from the side of the page. It worked fine when I was using a background image as text. Now I'm trying to just use CSS. I would like the text turned 90 degrees. When I do this via

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

the text rotates appropriately. It's parent div however, stays as it would had the text not been rotated. How can have the parent div resize to the text's rotation? I thought trying a display inline-block, but that didn't work.I've tried rotating the parent div instead of the text and that opened a new can of worms. Here is a fiddle showing the text turned. If you hover it, the tab slides out. https://jsfiddle.net/aLo5egpx/

Solution

<html>
  <head></head>
  <body>
  <div id="slideout">
    <div class="slideoutWrap"><div class="slideoutTxt">Avantages offerts par<br>les Grands Lacs</div></div>
    <div id="slideout_inner">
        <h3>Avantages offerts par les Grands Lacs</h3>
            <p>Les caractéristiques et les systèmes naturels des Grands Lacs et du fleuve Saint-Laurent comme l'eau, les rivières, les forêts, les insectes, les poissons et la faune sont des éléments importants pour des communautés en santé. Ils jouent un rôle dans l'économie ontarienne, car ils permettent la création de technologies écologiques innovatrices et nous aident à nous adapter aux effets imprévisibles du changement climatique.</p>
            <p>Les Grands Lacs et le fleuve Saint-Laurent aident à recycler et à purifier l'eau que nous buvons, à absorber les déchets que nous produisons et à tempérer notre climat. Ils sont également une source de nourriture, de combustibles et d'abris. Ils nous permettent de faire des activités récréatives, lesquelles favorisent la santé physique et mentale. La région incite un large éventail de gens de partout dans le monde à vivre, à travailler et à s'amuser en Ontario.</p>
    </div>
</div>

</body>



<style>
#slideout
  {
    position: fixed;
    top: 150px;
    left:0;
    background-color:#6DBBDF;
    transition-duration: 0.3s;
    border-radius: 0 5px 5px 0;
    z-index:1000;
    padding:5px;
  }
.slideoutWrap
  {
    display: inline-block;
    overflow: hidden;
    width: 2.5em;
  }
.slideoutTxt
  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: inline-block;
    color: #FFF;
    text-align:center;
    white-space: nowrap;
    -ms-transform: translate(35%,10%) rotate(90.0deg);  /* IE9+ */
    -webkit-transform: translate(35%,10%) rotate(90.0deg);  /* Safari 3.1+, Chrome */
    transform: translate(35%,10%) rotate(90deg);
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    line-height: 1.5;
  }
.slideoutTxt:after
  {
    content: "";
    display: block;
    margin: -.5em 0 100% ;
  }

#slideout_inner
  {
    position: fixed;
    top: 150px;
    left: -650px;
    width:600px;
    background-color:#00457c;
    background-repeat: repeat-x;
    background-position: left top;
    transition-duration: 0.3s;
    border-radius: 0 0 5px 0;
    z-index:1000;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
  }

#slideout:hover {
  left: 650px;
}
#slideout:hover #slideout_inner {
  left: 0;
  box-shadow:         4px 4px 8px 0px rgba(50, 50, 50, 0.64);
}
#slideout_inner p{ color:#ffffff; }

</style>



</html>