title: How to align text sideways using css transform
body: <p>I would like to have the <code>div</code> with a text as shown in the image.</p>
  
  <p>I have managed to make it this like.But i am sure that it is not the right way to do this.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div id = "bar"&gt;
  &lt;div class = "text"&gt;COMPETENCY&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Css</p>
  
  <pre><code>    #bar{
      height:200px;
      width:40px;
      background:dodgerblue;
      color:black;
      position:relative;
  }
  
      .text{
           color:white;
          -webkit-transform:rotate(270deg);
          width:100%;
          position:absolute;
          top:100px;
  
      }
  </code></pre>
  
  <p>I have achieved  what is there in this image using this code.But i need a better way to do this.Can some one help me with this.</p>
  
  <p>Image:<img src="https://i.stack.imgur.com/5RGw9.jpg" alt="Image"></p>
  
  <p><a href="http://jsfiddle.net/C2wGk/" rel="nofollow noreferrer">FIDDLE HERE</a></p>