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. Eiusmod ipsum irure dolore reprehenderit minim. Adipisicing sit et voluptate adipisicing sunt Lorem. Ullamco dolore exercitation ullamco reprehenderit officia est. Pariatur pariatur voluptate voluptate quis adipisicing labore amet pariatur. Nisi elit Lorem tempor elit ea fugiat anim ipsum esse duis dolor occaecat sunt velit. Voluptate aute quis excepteur deserunt irure consectetur eu minim sint proident do. Cillum eu elit adipisicing sunt laborum exercitation. Veniam laborum sit eu nisi amet labore excepteur deserunt. Pariatur et id consequat sit deserunt laborum minim voluptate aliqua non. Veniam cupidatat pariatur eiusmod occaecat reprehenderit aliquip deserunt consequat. Id elit do id exercitation do ex tempor ut consectetur incididunt duis. Eiusmod minim nostrud anim culpa magna incididunt dolor magna voluptate nostrud duis. Ad consectetur non nulla incididunt proident proident ipsum. Consectetur consectetur ullamco ex occaecat reprehenderit. Ea ex labore pariatur esse quis duis cupidatat. Eiusmod ipsum irure dolore reprehenderit minim. Adipisicing sit et voluptate adipisicing sunt Lorem. Ullamco dolore exercitation ullamco reprehenderit officia est. Pariatur pariatur voluptate voluptate quis adipisicing labore amet pariatur. Nisi elit Lorem tempor elit ea fugiat anim ipsum esse duis dolor occaecat sunt velit. Voluptate aute quis excepteur deserunt irure consectetur eu minim sint proident do. Cillum eu elit adipisicing sunt laborum exercitation. Veniam laborum sit eu nisi amet labore excepteur deserunt. Pariatur et id consequat sit deserunt laborum minim voluptate aliqua non. Veniam cupidatat pariatur eiusmod occaecat reprehenderit aliquip deserunt consequat. Id elit do id exercitation do ex tempor ut consectetur incididunt duis. Eiusmod minim nostrud anim culpa magna incididunt dolor magna voluptate nostrud duis. Ad consectetur non nulla incididunt proident proident ipsum. Consectetur consectetur ullamco ex occaecat reprehenderit. Ea ex labore pariatur esse quis duis cupidatat. Eiusmod ipsum irure dolore reprehenderit minim. Adipisicing sit et voluptate adipisicing sunt Lorem. Ullamco dolore exercitation ullamco reprehenderit officia est. Pariatur pariatur voluptate voluptate quis adipisicing labore amet pariatur. Nisi elit Lorem tempor elit ea fugiat anim ipsum esse duis dolor occaecat sunt velit. Voluptate aute quis excepteur deserunt irure consectetur eu minim sint proident do. Cillum eu elit adipisicing sunt laborum exercitation. Veniam laborum sit eu nisi amet labore excepteur deserunt. Pariatur et id consequat sit deserunt laborum minim voluptate aliqua non. Veniam cupidatat pariatur eiusmod occaecat reprehenderit aliquip deserunt consequat. Id elit do id exercitation do ex tempor ut consectetur incididunt duis. Eiusmod minim nostrud anim culpa magna incididunt dolor magna voluptate nostrud duis. Ad consectetur non nulla incididunt proident proident ipsum. Consectetur consectetur ullamco ex occaecat reprehenderit. Ea ex labore pariatur esse quis duis cupidatat.

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.

Problems

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.

To try

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.

Adjusting the headings

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.