Create an 8.5x11 or A4 Letter Size Page with Tables for Text

I would like to create an A4 or 8.5x11 page that would look like what I have attached. One page has a 3" top margin, 2 vertical lines, 1" margin left/right with line numbers on the left., and two 2" cells at the top below the 3" margin. Each page has numbers and footers.

As far as I could get HTML and the CSS:

body {
  background: rgb(204, 204, 204);
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

page[size="A4"] {
  width: 21cm;
  height: 29.7cm;
}

page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;
}

@media print {
  body,
  page {
    background: white;
    margin: 0;
    box-shadow: 0;
  }

<body>
  <page size="A4"></page>
  <page size="A4"></page>
  <page size="A4">PAGE</page>
  <page size="A4"></page>
</body>

Solution

How's this looking?

body { background: rgb(204,204,204); }
.page {
    --page-inset-side: 1in; /* left/right */
    --page-inset-ends: 1in; /* top/bottom */

    box-sizing: border-box;
    position: relative;

    background: white;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    
    padding: var(--page-inset-ends) var(--page-inset-side);
    
    /* footer-related stuff */
    --footer-height: 2in;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page.portraitA4 {
    --page-side-numbers: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25';
    --page-height: 29.7cm;
    width: 21cm;
    height: var(--page-height);
}
.page.landscapeA4 {
    --page-side-numbers: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15';
    --page-height: 21cm;
    width: 29.7cm;
    height: var(--page-height);
}

.page::before, .page::after {
    --page-vertical-line: black 0.1cm solid;

    box-sizing: border-box;
    width: var(--page-inset-side);
    position: absolute;
    top: var(--page-inset-ends);
    
    /* vertical line length */
    height: calc(
        var(--page-height)
        - (2 * var(--page-inset-ends))
        - 2.1cm /* space for footer */
    );
}

.page::before {
    content: var(--page-side-numbers);
    border-right: var(--page-vertical-line);
    left: 0;
    
    line-height: 0.9cm;
    font-weight: bold;
    
    --numbers-inset: 0.3in;
    /* leave no room for content so that we guarantee overflow and wrapping */
    padding-left: calc(var(--page-inset-side) - var(--numbers-inset));
    padding-right: var(--numbers-inset);
}

.page::after {
    content: '';
    border-left: var(--page-vertical-line);
    right: 0;
}

.pageContent {
    margin-inline: 0.4cm;
    margin-top: 2in;
}

.pageFooter {
    font-size: 9pt;
    display: grid;
    grid-template-columns: 5cm auto 6.3cm;
    margin-inline: 0.5cm;
}
.pageFooter p {
    margin: 0;
}
.pageFooter > :nth-child(2) {
    text-align: center;
}

<body>
    <div class="page portraitA4">
        <div class="pageContent">Page 1</div>
        <div class="pageFooter">
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
            </div>
            <div>
                3
            </div>
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
                <p>Vestibulum tempus tellus egestas, tempor justo
                   interdum, accumsan nisl.</p>
                <p>Sed mollis quam sed faucibus condimentum.</p>
            </div>
        </div>
    </div>
    <div class="page landscapeA4">
        <div class="pageContent">Page 2</div>
        <div class="pageFooter">
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
            </div>
            <div>
                3
            </div>
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
                <p>Vestibulum tempus tellus egestas, tempor justo
                   interdum, accumsan nisl.</p>
                <p>Sed mollis quam sed faucibus condimentum.</p>
            </div>
        </div>
    </div>
 </body>