title: Fit div to content inside parent and right align
body: <p>I have 3 div inside another div. Each of the inner div should right align, fit to content , start from a new line &amp; wrap it's own content to new line as well. I'm using <code>float</code>/<code>clear</code> to achieve this as in the fiddle below. Instead of <code>float</code>, can I use <code>display:inline-block</code> with <code>right:0</code> to achieve this?</p>
  
  <pre><code>&lt;div class="outer"&gt;
  
      &lt;div id="a" style="background-color:#8f8;" class="inner"&gt;
          AA
      &lt;/div&gt;
  
      &lt;div id="b" style="background-color:#88f;" class="inner"&gt;
          BBBBBBB
      &lt;/div&gt;
  
      &lt;div id="c" style="background-color:#888;" class="inner"&gt;
          CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.outer{
      background-color:#f88; 
      width:50%;    
  }
  
  .inner{
      word-wrap:break-word;
      max-width:100%;
      float:right; 
      clear:both;
  }
  </code></pre>
  
  <p>Works with <code>float</code>:
  <a href="http://jsfiddle.net/z6xuhLgL/3/" rel="nofollow">http://jsfiddle.net/z6xuhLgL/3/</a></p>
  
  <p>Doesn't work with <code>display:inline-block</code>:
  <a href="http://jsfiddle.net/z6xuhLgL/4/" rel="nofollow">http://jsfiddle.net/z6xuhLgL/4/</a></p>