title: How to position elements across an Axis (to fit perfectly)?
body: <p>Given a row of elements (set of data points), each has a certain size &amp; value (on the X axis), how can they be positioned across the same axis in such a way none will be overflowed?</p>
  <p><em>(The area which the circles are at is fluid in terms of width)</em></p>
  <h3>Now:</h3>
  <p><a href="https://i.stack.imgur.com/AUPzD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AUPzD.png" alt="enter image description here" /></a></p>
  <h3>Wanted:</h3>
  <p><a href="https://i.stack.imgur.com/9labt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9labt.png" alt="enter image description here" /></a></p>
  <h2><a href="https://jsbin.com/coyitu/edit?html,css,js,output" rel="nofollow noreferrer">Demo page</a></h2>
  <p>(A CSS-only solution will be preferred)</p>