<div class="container">
    <canvas></canvas>
    <ul>
        <li><span class="number">number</span>
            <span class="title">title</span>
            as many text as you need.as many text as you  need. as many text as you  need. as many text as you  need. as many text as you  need. as many text as you  need. as many text as you need
        </li>
        <li><span class="number">number</span>
            <span class="title">title</span>
            as many text as you  need. as many text as you  need. as many text as you  need. as many text as you need
        </li>
        <li><span class="number">number</span>
            <span class="title">title</span>
            as many text as you  need. as many text as you  need. as many text as you need
        </li>
        <li><span class="number">number</span>
            <span class="title">title</span>
            as many text as you  need. as many text as you need
        </li>
        <li><span class="number">number</span>
            <span class="title">title</span>
            as many text as you need
        </li>
        <li><span class="number">number</span>
            <span class="title">title</span>
            as many text as you need vvas many text as you need
        </li>
        <li><span class="number">number</span>
            <span class="title">title</span>
            as many text as you need as many text as you  need. as many text as you  need. as many text as you  need. as many text as you  need. as many text as you  need. as many text as you need
        </li>
    </ul>
    <div style="clear:both"></div>
</div>

.container .number {
  display:inline-block;
  border-radius: 1.5em;
  padding:0.5em;
  font-size:1em;
  background: blue;
  color: white;
}
.container .title {
  display:block;
  font-weight: bold;
  font-size:1.2em;
}

.container ul {
  list-style-type: none;
  vertical-align: top;
}
.container ul li{
  float:left;
  width:200px;
  height: 200px;
}

.container {
  position: relative;
}
.container canvas{
  position: absolute;
  z-index : -1;
}

$(function(){

        function draw(){
            let ofs=$('.container')[0].getBoundingClientRect();
            function line(a, b, options) {
                options = options || {};
                ctx.beginPath();
                ctx.lineCap = options.lineCap || "round";
                ctx.lineWidth = options.lineWidth || 1;
                let x = a, y = b;
                ctx.moveTo(x[0], x[1]);
                ctx.lineTo(y[0], y[1]);
                ctx.strokeStyle = options.color || "gray";
                ctx.stroke();
                return [b[0],b[1]];
            }

            let canvas = $('.container canvas')[0];
            let ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            var last=false;
            $('.container .number').each(function(){
                let xofs=this.getBoundingClientRect(), p=[xofs.left+10,xofs.top+4];
                console.log(xofs,p, last);
                if(last && last[1]!=p[1]){
                    // just a line
                    line(last,[4000, last[1]]);
                    line([0, p[1]],p);
                    last = p;
                } else if(!last)
                    last = p;
                else {
                    last = line(last, p);
                }
            })
        }

        $(window).on('resize', function(){
            let ofs=$('.container')[0].getBoundingClientRect();
            $('.container canvas').attr({width: ofs.width,height:ofs.height});
            draw();
        }).trigger('resize');
    })