title: how to fit text inside a HTML div
body: <p>Hi I have div with some text 'Basic Details'. I want Details to be below Basic.</p>
  
  <p>How can I achieve this.</p>
  
  <p>Here is my jsbin
  <a href="https://jsbin.com/dudine/edit?html,css,output" rel="nofollow">https://jsbin.com/dudine/edit?html,css,output</a></p>
  
  <p>Sorry guys I dint include any code in here.</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .textStyle {
     color: white;
     font-weight: bold;
     text-align: center;
     vertical-align: middle;
     font-size: 90%;
     white-space: normal;
   }
   .left-rounded-corner {
     width: 100px;
     height: 50px;
     background: red;
     line-height: 16px;
     box-sizing: border-box;
     padding-top: 10px;
     border-top-left-radius: 50px;
     border-bottom-left-radius: 50px;
   }
   /*Allign elements in horizontally*/
   .element_align_horizontally {
     display: inline-block;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='statusContainer' class='scrollable'&gt;
    &lt;div class="left-rounded-corner element_align_horizontally textStyle"&gt;Basic Details&lt;/div&gt;
    &lt;div class="rectangle-shape element_align_horizontally textStyle"&gt;two&lt;/div&gt;
    &lt;div class="rectangle-shape element_align_horizontally textStyle"&gt;three&lt;/div&gt;
    &lt;div class="rectangle-shape element_align_horizontally textStyle"&gt;Four&lt;/div&gt;
    &lt;div class="right-rounded-corner element_align_horizontally textStyle"&gt;Five&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help
  Rao</p>