title: Make a block level element to have an adjusting width like inline element?
body: <p>By default, block level elements have width of like 100% even without content, it occupies the space across it's parent element horizontally. </p>
  
  <p>Inline elements on the other hand, adjust it's width depending on it's content. If the the content is long, then the element becomes wider, if the content is short the width shrinks. </p>
  
  <p><img src="https://i.stack.imgur.com/UGDvJ.png" alt="enter image description here"></p>
  
  <p>Here's a <a href="http://jsfiddle.net/FWXVa/1/" rel="nofollow noreferrer">demo</a>.</p>
  
  <p>What I want to achieve here is to make the block-level element to have a width that will adjust depending on it's content like inline element. How will I do that?</p>
  
  <p>Note:</p>
  
  <ul>
  <li>I want block elements to be block, not inline-block or inline. </li>
  <li>I want
  to avoid floats, I think it can be achieved without floating
  elements.</li>
  </ul>