Верстка PDF формы в HTML контейнере не используя flex и boostrap

Необходимо сверстать PDF документ,  внутри следующего контейнера:

    <style>

        body {

            margin: 0px !important;

            padding: 0px !important;

            width: 100%;

        }

        p {

            font-size: 20px;

            text-align: justify;

            line-height: 25px;

        }

        ul li {

            font-size: 20px;

            text-align: justify;

            line-height: 25px;

        }

        table {

            font-size: 20px;

            text-align: justify;

            line-height: 30px;

        }

        .page {

            padding: 30px;

            height: 1400px;

            width: 994px;

            margin-bottom: 30px;

            display: inline-block;

            position: relative;

        }

            .page.without-padding {

                padding: 0px !important;

                margin-right: 0px;

                width: 100%;

            }

            .page .header {

                margin-top: 20px;

                margin-bottom: 20px;

                display: inline-block;

            }

                .page .header div {

                    display: inline-block;

                }

                    .page .header div.border-line {

                        width: 890px;

                        margin-left: 70px;

                        border-bottom: solid 1px rgba(31, 78, 121, 0.7);

                    }

                .page .header img {

                    float: left;

                    opacity: 0.7;

                    margin-bottom: 2px;

                    width: 350px;

                }

                .page .header div.contact {

                    float: right;

                    margin-top: 25px;

                    display: block !important;

                    width: 200px;

                    margin-left: 430px;

                    text-align: right;

                }

                    .page .header div.contact .phone {

                        margin-right: 20px;

                        color: rgba(34, 42, 53, 0.7);

                        line-height: 1.202148;

                        font-style: normal;

                        font-weight: bold;

                        font-size: 20px;

                        display: block !important;

                    }

                    .page .header div.contact .site {

                        margin-right: 20px;

                        color: rgba(5, 99, 193, 0.7);

                        line-height: 1.202148;

                        font-style: normal;

                        font-weight: bold;

                        font-size: 20px;

                        display: block !important;

                    }

            .page .content {

                width: 885px;

                margin-left: 70px;

            }

                .page .content table {

                    border-collapse: collapse;

                }

                .page .content table, td, th {

                    border: 1px solid black;

                    padding-left: 5px;

                }

                .page .content div {

                    display: inline-block;

                    width: 100%;

                }

            .page .footer {

                margin-top: 20px;

                margin-bottom: 40px;

                display: inline-block;

                float: right;

                margin-right: 30px;

                position: absolute;

                right: 150px;

                bottom: -30px;

                width: 150px;

                z-index: 100;

            }

                .page .footer .pagenumber {

                    float: right;

                    display: inline-block;

                }

                .page .footer img {

                    float: right;

                    position: absolute;

                    left: 155px;

                    bottom: -50px;

                    width: 150px;

                }

        .application-header {

            background: rgba(163, 187, 227, 0.7);

            text-align: center;

            color: #ffffff;

            width: 890px;

            margin-left: 70px;

            padding-top: 10px;

            padding-bottom: 10px;

        }

        .surplus-header {

            text-align: center;

            width: 890px;

            margin-left: 70px;

            padding-top: 10px;

            padding-bottom: 10px;

        }

        .radio-input {

            position: relative;

            padding: 10px 0;

        }

            .radio-input label {

                display: -webkit-box;

                display: -webkit-flex;

                display: -moz-box;

                display: -ms-flexbox;

                display: flex;

                -webkit-box-align: center;

                -webkit-align-items: center;

                -moz-box-align: center;

                -ms-flex-align: center;

                align-items: center;

                -webkit-box-pack: justify;

                -webkit-justify-content: space-between;

                -moz-box-pack: justify;

                -ms-flex-pack: justify;

                justify-content: space-between;

                cursor: pointer;

            }

                .radio-input label input {

                    position: absolute;

                    top: 0;

                    left: 0;

                    opacity: 0;

                    width: 0;

                    height: 0;

                    overflow: hidden;

                }

                .radio-input label .beutify {

                    width: 22px;

                    height: 22px;

                    -webkit-border-radius: 50%;

                    -moz-border-radius: 50%;

                    border-radius: 50%;

                    border: 1px solid #cfdce8;

                    position: relative;

                    -webkit-transition: all 0.3s;

                    -o-transition: all 0.3s;

                    -moz-transition: all 0.3s;

                    transition: all 0.3s;

                    background-color: #fff;

                }

                    .radio-input label .beutify:before {

                        content: '';

                        position: absolute;

                        width: 10px;

                        background-color: #fff;

                        -webkit-border-radius: 50%;

                        -moz-border-radius: 50%;

                        border-radius: 50%;

                        height: 10px;

                        left: 50%;

                        top: 50%;

                        -webkit-transform: translate(-50%, -50%);

                        -moz-transform: translate(-50%, -50%);

                        -ms-transform: translate(-50%, -50%);

                        -o-transform: translate(-50%, -50%);

                        transform: translate(-50%, -50%);

                        opacity: 0;

                        -webkit-transition: all 0.3s;

                        -o-transition: all 0.3s;

                        -moz-transition: all 0.3s;

                        transition: all 0.3s;

                    }

                .radio-input label .texter {

                    width: -webkit-calc(100% - 35px);

                    width: -moz-calc(100% - 35px);

                    width: calc(100% - 35px);

                    font-size: 14px;

                    color: #596b83;

                    font-style: normal;

                    line-height: 1.714;

                    font-weight: 300;

                }

                .radio-input label:hover .beutify {

                    background-color: #1a9dd3;

                    border-color: #1a9dd3;

                }

                .radio-input label input:checked ~ .beutify {

                    background-color: #1a9dd3;

                    border-color: #1a9dd3;

                }

                    .radio-input label input:checked ~ .beutify:before {

                        opacity: 1;

                    }

        .row {

            display: flex;

            -ms-flex-wrap: wrap;

            flex-wrap: wrap;

        }

        .col-sm-3 {

            flex: 0 0 25%;

            max-width: 25%;

        }

    </style>

  <div class="page">

            <div class="header">

                   //TODO: header

            </div>

            <div class="content">

                    //TODO: Put content here

            </div>

            <div class="footer">

            </div>

        </div>

Нельзя использовать flex и boostrap, можно использовать классы css

Все классы должны лежать в елементе style,  который уже имеет набор готовых стилей, так что их необходимо будет докладывать.