w3.CSS Framework - Aligning equal columns

Question

I'm trying to use w3's own CSS framework and I'm struggling to find the right styling property to make 2 div sections have equal space when side by side.

One div section is given a "w3-left" property and the other is given a "w3-right" property. Which does exactly what it is meant to do as you can see in the attached picture. However, they only take up as much space on the page as the text written inside the div, and I need them to take up equal amount of space.

Is it possible to use w3.CSS framework and have them both equally aligned, or do I need to style them in a general CSS file, alongside the framework?

I've tried the "w3-half" option, but but this makes both the left and right sections overlap in the middle. Even without the margin/padding properties it still had an overlap.

template website example

This is the code for that section of the site.

<section class="home-section w3-mobile w3-auto w3-row">
    <main class="main-article w3-margin w3-border w3-display-container w3-display-top">
        <div>
            <h4>Title</h3>
            <p>Writing</p>
        </div>
    </main>
    <div class="subs w3-row">
    <section class="sub-article-1 w3-margin w3-border w3-display-container w3-left">
        <div>
            <h6>Title</h6>
            <p>Writing here lots of thingz</p>
        </div>
    </section>
    <section class="sub-article-2 w3-margin w3-border w3-display-container w3-right">
        <div>
            <h6>Title</h6>
            <p>Writing</p>
        </div>
    </section>
    </div>
</section>