title: Auto Arranging the elements using css
body: <p>I have an application in which I am kind of stuck. 
  i have created a widget which needs to be placed in such a way that it needs to auto place itself. 
  Eg:<img src="https://i.stack.imgur.com/A2clZ.jpg" alt="enter image description here"></p>
  
  <p>I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes 
  Eg:<img src="https://i.stack.imgur.com/nUQpy.jpg" alt="enter image description here"></p>
  
  <p>It becomes like this. What I want is it auto adjust itself to consume the empty spaces. </p>
  
  <p>I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.</p>
  
  <p>Any help is appreciated</p>