How to lay out this block not by breakpoints, but by rubber?

Question

Layout

Here's how in the layout
Here's the code I wrote https://jsfiddle.net/kj42otmq/72/
1. How to do numbering in a checkerboard pattern?
2. How to "on the fly" calculate the width of the line connecting the number and the center line?
3. How to "on-the-fly" calculate the height of the center line if one or more blocks are added?