<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Stagger Spacing</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
         <div id="background">
              <!-- the dynamic html would be what is in the span -->
              <!-- user could determine the spacing using the data-spacing attribute -->
               <span id="mainLegals" data-spacing="4">
                   <p>If you don't start, you can't finish</p>
                   <p>If you don't start, you can't finish</p>
                   <p>If you don't start, you can't finish</p>
                   <p>If you don't start, you can't finish</p>
                   <p>If you don't start, you can't finish</p>
                   <p>If you don't start, you can't finish</p>
                   <p>If you don't start, you can't finish</p>
                   
               </span>
         </div>
    </body>
</html>
body, html {
  margin: 0; padding: 0;
}
p { 
  line-height: 0.1em; 
  font-family: 'arial' 
}
#background {
  position: absolute;
  background-image: url('http://assets.neunie.com/files/tuts/2019/01/30/diagonal.png');
  width: 504px;
  height:380px;
}
function spacingStagger() {
    var mainLegals = document.getElementById("mainLegals");
    var breaks = document.querySelectorAll("#mainLegals p");
    var spacing = mainLegals.dataset.spacing;
    var spaceCounter = parseInt(spacing);

    var spaceWidth = 2; // set the space size to 2px as default
    var baseline = 28; // first line starts from baseline, this could have mad editable from the html too
    var spacer = spaceCounter * spaceWidth;

    if (spacing == 0) {
        console.log("do not stagger the copy");
    } else {

        //if spacing is set to anything other than 0, calculate the values
        for (i = 0; i < breaks.length; i++) {
            breaks[i].style.paddingLeft = baseline + "px";
            baseline = baseline + spacer;
        };
    }
}
//call this function after the page elements have been added
spacingStagger(); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.