title: Assign multiple elements random size and random placement, while following the sequential div order
body: <p>Trying to figure out somekind of logic that will let me distribute elements in a sequenced  order. What size and position should be randomly generated within a given range (for example, element must be within viewport and the size of the element should be within a defined range such as minimum 10% of viewport, maximum 60%).</p>
  
  <p>I'm not sure what would be the best way to approach something like this, any ideas?<br>
  I've attached a sketch below of what it <em>could</em> look like. The layout would be different at each load.</p>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="post"&gt;Post 1&lt;/div&gt;
     &lt;div class="post"&gt;Post 2&lt;/div&gt;
     &lt;div class="post"&gt;Post 3&lt;/div&gt;
     &lt;div class="post"&gt;Post 4&lt;/div&gt;
     &lt;div class="post"&gt;Post 5&lt;/div&gt;
     &lt;div class="post"&gt;Post 6&lt;/div&gt;
     &lt;div class="post"&gt;Post 7&lt;/div&gt;
     &lt;div class="post"&gt;Post 8&lt;/div&gt;
     &lt;div class="post"&gt;Post 9&lt;/div&gt;
     &lt;div class="post"&gt;Post 10&lt;/div&gt;
     &lt;div class="post"&gt;Post 11&lt;/div&gt;
     &lt;div class="post"&gt;Post 12&lt;/div&gt;
     &lt;div class="post"&gt;Post 13&lt;/div&gt;
     &lt;div class="post"&gt;Post 14&lt;/div&gt;
     &lt;div class="post"&gt;Post 15&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/F6P0N.png" alt="enter image description here"></p>