left div track right div height

Question

Hello, I am creating a pdf contract and in it I have two columns, but when breaking page the rest of the text loses formatting, the solution I found more viable was to make the left div follow the right div so as not to lose formatting. There are similar questions as this but could not solve my problem. Leave two Divs always at the same height, Problem with height of Ivs that do not accompany each other’s content these two found examples with table and table-Cell, flex and did not help me, what I got closer was this link Dynamically increasing the content of the div I just can’t seem to apply it to you, so can someone help me.

Follow what I’ve done:

<style>
    #corpo {
    position: relative;
    text-align: justify;
    margin-left: 40px;
    margin-right: 40px;
    }
</style>

part of the structure

<div id="corpo" style="text-transform: uppercase;"><b>'.$resp2['ordem'].'. '.utf8_decode($resp2['nome_clausula']).'</b><hr></div>');
    while($resp3 = mysql_fetch_array($resul3)){
        $lista.='
            <div id="corpo">
                <div style="height: auto; max-width: 6%; overflow: auto; display: inline-block; background-color: red; "><b>'.$resp2['ordem'].'.'.$resp3['ordenar'].'</b>.</div>
                <div style="max-height: 100%; max-width: 93%; overflow: auto; display: inline-block; background-color: green; ">'.utf8_decode($this->palavraReservada($resp3['descricao'])).'</div>
            </div></br>&nbsp;';
    }

picture of the contract as it gets when breaking page

Answer 1

As discussed by the comments of the question follows a layout option that can suit you. You can put position:absolute in the number and a margin-left in the text, so even breaking in two pages the text remains aligned, because it does not depend on an element before to stay in position, who will make this role now is the left margin.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.corpo {
    position: relative;
    border: 1px solid #000;
}
.num {
    height: auto; 
    max-width: 6%; 
    overflow: auto; 
    display: inline-block; 
    background-color: red; 

    position: absolute;
    top: 0;
    left: 0;
}
.txt {
    max-height: 100%; 
    max-width: 93%; 
    overflow: auto; display: 
    inline-block; 
    background-color: green; 

    margin-left: 6%;
}

<div class="corpo">
    <div class="num"><b>5.1</b>.</div>
    <div class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus amet expedita pariatur ipsum dolor in vitae rem, accusamus molestias quasi? Sequi obcaecati perspiciatis nobis quo corporis consequatur fuga iste iusto.</div>
</div>
<div class="corpo">
    <div class="num"><b>5.1</b>.</div>
    <div class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus distinctio totam reprehenderit id ipsum quod, alias cupiditate iusto aliquid eum dolorem, eveniet nostrum deserunt veritatis natus. Dicta corrupti voluptas neque ea asperiores vitae voluptatum et assumenda maxime tenetur ipsum doloribus autem accusamus velit nulla quaerat nobis, sint reprehenderit atque. Nobis doloribus nihil, quasi quod eligendi commodi, numquam, maxime molestias nam soluta laborum corrupti deleniti reiciendis dolore impedit praesentium aliquid ut natus fuga debitis fugit nemo quia. Cumque voluptatum qui ullam quo, nam possimus aliquam sit modi ea eligendi magni dicta rerum mollitia provident quae. Iusto amet facere accusantium quisquam nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam delectus nihil, doloribus architecto in iusto repudiandae earum similique officiis explicabo dolorum quibusdam quis distinctio officia. Ex quasi officiis voluptatum iusto totam labore, hic provident repellendus quaerat minus explicabo maxime optio neque maiores illum cum quo consectetur, sunt beatae aperiam quod sit corrupti. Est optio adipisci error libero nemo reiciendis asperiores quisquam, cumque consequatur officia incidunt veritatis voluptatem aut ipsum. Cum a ad illum quasi aut numquam accusantium dolorum non saepe quia illo, natus eaque dolor, consectetur voluptatem voluptates quam quae aliquid, beatae impedit! Alias, iusto. Necessitatibus nulla mollitia libero maiores ipsam quae officiis id? Ratione pariatur tempora non fuga tenetur animi eligendi aliquid alias ducimus perspiciatis exercitationem optio, cumque placeat est culpa itaque velit dignissimos quidem nisi in laboriosam obcaecati. Aliquam dolorem tempora iure amet magni voluptas perspiciatis. Deleniti ipsum similique necessitatibus temporibus mollitia dolorum perspiciatis facere cum aspernatur, obcaecati, repellendus, nesciunt fugiat unde dicta nobis harum! Harum voluptate totam omnis delectus quibusdam saepe asperiores amet nostrum adipisci ipsa, dolorum corporis nesciunt quis necessitatibus. Eaque velit eos dolores deleniti modi ea sapiente fugiat labore voluptatem voluptate rerum quas nobis tempore voluptas, iusto vitae, aspernatur corrupti saepe libero tenetur eligendi cupiditate nesciunt? Debitis quae, asperiores adipisci, voluptatum nostrum dignissimos quisquam corporis sapiente necessitatibus enim voluptatibus porro facere voluptates repellendus? Odio maiores atque, distinctio fugiat consectetur ratione mollitia suscipit cupiditate accusamus cumque, sit qui officia quibusdam, nam adipisci pariatur laudantium provident aut? Sed magnam deserunt nemo iste tempore itaque velit dolorum fugit ipsam officia suscipit modi optio aut earum porro labore obcaecati totam soluta, in fugiat. Debitis velit consectetur blanditiis voluptatem est quae accusantium porro non eius dolorem? Quis quod quo officia ad, voluptates nihil sit consequuntur, mollitia ea nemo vel tempora debitis obcaecati veniam explicabo commodi. Iste alias esse consequatur voluptatem reprehenderit sed odit numquam accusamus, libero dolorem aspernatur, molestias maxime labore nihil at iusto vero eaque dolorum praesentium illum natus quisquam quam! Modi saepe explicabo obcaecati culpa accusantium qui ex. Aspernatur esse optio odio quo nobis voluptatem atque maxime at, facilis, repellendus veritatis alias consectetur. Repellat, suscipit. Maxime, fugit? Est consequatur voluptate saepe excepturi numquam nulla doloremque, cumque obcaecati odio quidem adipisci voluptas? Molestias unde amet asperiores, blanditiis tempore ipsa nam obcaecati reprehenderit fugit beatae dolorum iusto atque odio optio? Dolores possimus, quaerat itaque dolorem doloremque sed, magnam laboriosam illum magni sunt alias quis saepe modi numquam quasi ratione voluptatem a, necessitatibus impedit cupiditate. Corrupti tenetur nostrum, quae facilis ducimus sint non expedita aut! Explicabo molestias maxime omnis, possimus et nihil adipisci magni excepturi laboriosam voluptates fugit officia nostrum cum tempora sed quia dignissimos. Et quae expedita quas deserunt dolores distinctio veniam nihil eum, sapiente consectetur pariatur vel odit nostrum quaerat repellat. Quaerat vero architecto voluptates quos rem pariatur praesentium soluta accusantium alias, illum vel consequuntur ad nam adipisci itaque molestias sint, corporis tenetur iure dolore! Expedita dolor dignissimos recusandae doloribus et voluptate eaque ipsam eos, nostrum itaque provident delectus quas vitae harum perferendis nisi animi! Laboriosam, eos. Nobis dolore unde numquam deleniti soluta officia minus commodi, reprehenderit quam perspiciatis id laboriosam porro nisi deserunt obcaecati. Labore accusantium, nostrum debitis quas ipsum ad. Obcaecati similique asperiores deleniti sunt, laudantium nulla dolorum earum consectetur nihil ea qui distinctio aperiam! Natus ipsum eius suscipit saepe praesentium voluptatum nesciunt, unde perspiciatis deleniti ipsa aliquid id excepturi maxime, qui reiciendis exercitationem quaerat? Corrupti natus dignissimos officiis fugit, velit quaerat pariatur ducimus autem eius, error animi numquam a quod alias distinctio doloremque nesciunt. Ullam nam quae veniam vel at dolore laudantium cupiditate asperiores eum vero quibusdam, ratione, tempora esse ea reiciendis sit aliquid. Minus obcaecati architecto nesciunt cumque, cupiditate quis quaerat, eveniet iste sed maiores ab expedita? Fugit, explicabo? Deleniti illum culpa quam ut! Accusantium culpa repellendus architecto nulla beatae optio accusamus quisquam, nisi praesentium iusto molestias reiciendis, esse excepturi quaerat necessitatibus? Rerum illum blanditiis, et soluta maxime esse cum earum voluptates tempora dicta quis reiciendis hic quidem iusto doloribus veritatis fugit nemo dignissimos. Labore, veritatis doloremque? Quasi eum quo doloribus ratione adipisci corrupti distinctio assumenda veritatis debitis, odio recusandae nostrum, quod modi cupiditate repellat corporis suscipit exercitationem laboriosam sequi necessitatibus esse possimus, voluptate quia. Inventore, accusamus natus nisi earum adipisci labore odio quis excepturi.</div>
</div>
<div class="corpo">
    <div class="num"><b>5.1</b>.</div>
    <div class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus distinctio totam reprehenderit id ipsum quod, alias cupiditate iusto aliquid eum dolorem, eveniet nostrum deserunt veritatis natus. Dicta corrupti voluptas neque ea asperiores vitae voluptatum et assumenda maxime tenetur ipsum doloribus autem accusamus velit nulla quaerat nobis, sint reprehenderit atque. Nobis doloribus nihil, quasi quod eligendi commodi, numquam, maxime molestias nam soluta laborum corrupti deleniti reiciendis dolore impedit praesentium aliquid ut natus fuga debitis fugit nemo quia. Cumque voluptatum qui ullam quo, nam possimus aliquam sit modi ea eligendi magni dicta rerum mollitia provident quae. Iusto amet facere accusantium quisquam nostrum!</div>
</div>