JSFiddle - React, Tailwind, and code Playground

HTML

<HTML>
    <body>
                
        <div class="container">
             <!-- <div class="container2"> -->
                <div id="main-part" class="divs-equal">
                    <div class="div-padding">
                        <h1>Main info</h1>
                        
                        <p>Some text</p>
                        <p>Some text</p>
                        <p>Some text</p>
                    </div>
                </div>
            <!-- </div> -->
            
            <!-- <div class="container3"> -->
                <div id="additional-part" class="divs-equal">
                    <div class="div-padding">
                        <h1>Additional info</h1>
                
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                    </div>  
                </div>
             <!--</div> -->
             
        </div>
        
    </body>
</HTML>

CSS

body
{
    background-color: #003399;
    color: #FFCC00;
    margin: 0;
    padding: 0;
}

a:link
{
    color: #FFCC00;
}

a:visited
{
    color: #FFCC00;
}

.container
{
    display: table;
    border-collapse: separate;
   
    /* border-spacing: 10px */
}
.divs-equal
{
    display: table-cell;
}

.div-padding
{
    padding: 10px;
}

#main-part
{
    /* float: left; */
    width: 60vw;
    border-right-style: solid;
    border-right-color: #FFCC00;
    border-right-width: 3px;
    /* margin-right: 10px; */
    height: 100%;
    /* min-height: 100vh; */
}

#additional-part
{
    width: 40vw;
    height: 100%;
    /* min-height: 100vh; */
    /* margin-left: 10px; */
}