I'm making a ball bounce from div to div(with .bounce-on). In order to do that, I'm using absolute divs (with .orbit) positioned with JS to make the ball bounce from the middle to the middle of each div.

Here is the codepen: https://codepen.io/wearysigninup/pen/rNpNmoZ

.css-container{
  position:relative;
  text-align:center;
}

.orbit{
  top: -20px;
  position: absolute;
  width: 50px;
  height:50px;
  border: black 1px solid;
  border-radius:50%;
  transform: rotate(0deg);
}

<div class="css-container">
  <div class="orbit">
    <div id="ball"></div>    
  </div>
  ...
  <div class="orbit"></div>
</div>

<div class="line">
   <span class="bounce-on">bounce</span>·<span class="bounce-on">bounce</span> 
   <span class="bounce-on">bounce</span> <span class="bounce-on">bounce</span>·
   <span class="bounce-on">bounce</span>
</div>

I'd like to have the div.orbit adjust their width based on changes on .bounce-on without using javascript to recalculate stuff if possible. The timing of the animation is tied to music, and I'd like it to not get out of sync.

Could anyone help with that? Is there an html markup or some css calculations that would make this possible?

Right now, I'm listening to resizing event to adjust the size but it's getting the bouncing out of sync.

To my knowdledge, what I'm asking is not possible. But I came pretty close with svg text. Only problem with using svg, is that the event endlers are inconsistently triggered and not well supported accross browsers. Also, not very accessible.

I'm hoping it's somehow possible to mimic the svg behavior when resizing window with css, thus my question.