This is a pure CSS layout. It uses a repeating linear gradient for the horizontal lines. The red margin line is a border on an empty div.
The line height is the same as the total height of the gradient, in this case 34px. Working out the spacing between paragraphs is done from the gradient interval. However here it is 34px yet if the margins are set to 34px there is a double space, or 2 lines. What happened to collapsing margins? So here it is set at 17px.
The font is Comic Sans MS.
I couldn't get the div for the left margin to extend all the way to the bottom. Tried to use grid-row: 1 / -1; but that didn't work, probably because these grid-rows are implicit and created by new paragraphs. The way to fix it was add a really high number for the grid-rows. I used grid-row: 1 / 100;.
Overall I'm not sure this was the best way to create this. It works though and interesting to see how the line spacing can work.
If you add a height to the grid container everything goes out of alignment. To fix it you need to add align-content: start; to prevent the grid items being aligned evenly over the page.
I think this could be better as a regular container with the div on the left set to height: 100% possibly
I added a bottom margin to the last child of the paper element.
The headings aren't as perfectly positioned on the line as the paragraphs. This is probably because they're a different height and the height is spreading both up and down. The fix here was to use position: relative; to move the h2 elements up slightly. Alternatively using transform: translateY() with a small negative value might do it too.