Left Margin doesn't scale well with body content

[CaptainDredge]

Describe the bug
Since Left margin element is an independent html component from the body content it doesn't scale as the body content size is increased beyond one page as indicated by the pink margin which stops at the end of first page in preview.
Also when the size of left margin is increased beyond one page the scroll position of left margin can be different from the scroll position of body content which leads to confusion while writing as well as when pdf generated depends upon the scroll position of left margin.

To Reproduce
Steps to reproduce the behavior:

1. Go to the project site
2. Add content to page such that it goes beyond one A4 page
3. Now Add content to left margin such that its size increase beyond one page
4. Then scroll the left margin a little down such that the sroll bar is somewhere in the middle position
5. Generate PDF

Expected behavior
If the current preview design is maintained as it is then the left margin element should increase its size as the body content size increases making the pink border extend to the next page in preview. Also, while generating pdf the scroll position of left margin shouldn't affect the final result.
If the current design is allowed to change then as per me whenever the page size increase beyond A4 the current page should not increase its size rather a similar A4 size page should be concatenated to the existing A4 pages and control should be transfer to the next page.

Screenshots

1. Pink border of left margin doesn't scale
   

2. Scroll position dependency
   Preview:
   
   PDF generated:

Desktop (please complete the following information):

• OS: Windows 10
• Browser Mozilla Firefox
• Version 79.0 (64bit)

Additional context
Related Issue: #81

Query
why we are adding a div element inside left margin container whenever a carriage return is pressed to enter the next line? Can't we just add the content in a single div element as done with body content?

[saurabhdaware]

why we are adding a div element inside left margin container whenever a carriage return is pressed to enter the next line? Can't we just add the content in a single div element as done with body content?

In that case, it will all be a same textarea so to write after margin, you will have to keep adding space. Also copy-pasted text will overflow to margin so they are different divs right now.

I think the issue with separate scrollbar in left margin will be solved if we solve #81

Not scaling till the end is an issue for sure! Keeping this open for that.