html - Vertical Alignment of text inside a container, that is nested within another container - Stack Overflow

Im using containers and have a div "links-lowercontainer" that has nested inside it 3 further divs:

links-lowerleftcontainer, links-lowercentrecontainer, links-lowerrightcontainer

This then allows me to add description text to the links-lowerleftcontainer and links-lowerrightcontainer columns, links-lowercentrecontainer is essentially a spacer column.

All looks as I want it, except I'm struggling to vertically align so the text in links-lowerleftcontainer and links-lowerrightcontainer is positioned vertically at the top. see below the Image showing the problem

Ive put some borders around to show links-lowerleftcontainer and links-lowerrightcontainer. Ive tried using:

align-items: center
justify-content: flex-start
align-content: flex-start

in links-lowerleftcontainer and also the higher level links-lowercontainer, but no joy. Im sure im missing something simple to be able to align to the top. Hoping someone can point me in the right direction.

Ive included the HTML and CSS snippets below:

.container[data-type="links-outercontainer"] {
    container-type: inline-size;
    flex-direction: column;
    padding: 0px 3px 0px 3px;
    display: flex;
    max-inline-size: 1140px;
    margin: auto;
    gap: 0 0;
    border: solid 1px rgba(255,0,0,0.75);
    border-radius: 5px;
}

.container[data-type="links-titlecontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px blue;*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 100%;
    margin: auto;
    gap: 0 0;
}

.links-title {
    color: rgba(255,0,0,0.75);
    font-family: "helvetica";
    text-align: left;
    padding: 3px 0px 3px 0px;
    line-height: 1em;
}

.container[data-type="links-uppercontainer"] {
    container-type: inline-size;
    flex-direction: row;
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 100%;
    margin: auto;
    gap: 0 0;
    /*border: solid 1px rgba(2,0,0,0.75);*/
}

.container[data-type="links-upperleftcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(128 128 128);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.container[data-type="links-uppercentrecontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(255 106 0);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 4%;
    margin: auto;
    gap: 0 0;
}



.container[data-type="links-upperrightcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(128 128 128);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.links-websitename {
    color: #000000;
    font-family: "helvetica";
    text-align: left;
    padding: 0px 0px 0px 0px;
    line-height: 1.5em;
}


.container[data-type="links-lowercontainer"] {
    container-type: inline-size;
    flex-direction: row;
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 100%;
    margin: auto;
    gap: 0 0;
    border: solid 1px rgba(2,0,0,0.75);
/*  align-items: center;
    justify-content: flex-start;
    align-content: flex-start;
    vertical-align: top;
    text-align: justify;*/
}

.container[data-type="links-lowerleftcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    border: solid 1px rgb(182 255 0);
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.container[data-type="links-lowercentrecontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(255 106 0);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 4%;
    margin: auto;
    gap: 0 0;
}

.container[data-type="links-lowerrightcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    border: solid 1px rgb(182 255 0);
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.links-websitedescription {
    color: #000000;
    font-family: "helvetica";
    /*text-align: justify;*/
    padding: 0px 0px 5px 0px;
    line-height: 1.5em;
    /*align-content: start;*/
    /*vertical-align: bottom;*/
}
/*---Desktop Viewport---*/
@media(min-width: 1024px) {
    .links-title {
        font-size: 25px;
        font-weight: 600;
    }

    .links-websitename {
        font-size: 15px;
        font-weight: 600;
    }

    .links-websitedescription {
        font-size: 15px;
        font-weight: 400;
    }
}
/*---Tablet Viewport---*/
@media(max-width: 1023px) {
    .links-title {
        font-size: 20px;
        font-weight: 600;
    }

    .links-websitename {
        font-size: 13px;
        font-weight: 600;
    }

    .links-websitedescription {
        font-size: 13px;
        font-weight: 400;
    }
}
/*---Mobile Viewport---*/
@media(max-width: 767px) {
    .links-title {
        font-size: 16px;
        font-weight: 600;
    }

    .links-websitename {
        font-size: 12px;
        font-weight: 600;
    }

    .links-websitedescription {
        font-size: 12px;
        font-weight: 400;
    }
}

    <section>   
    <div class="container" data-type="links-outercontainer">
            <div class="container" data-type="links-titlecontainer">
                <p class="links-title">World War 2 Links</p>
            </div>
            <div class="container" data-type="links-uppercontainer">
                <div class="container" data-type="links-upperleftcontainer">
                    <!--<a href="/">-->
                    <p class="links-websitename">Imperial War Museums</p>
                    <!--</a>-->
                </div>
                <div class="container" data-type="links-uppercentrecontainer"></div>
                <div class="container" data-type="links-upperrightcontainer">
                    <!--<a href="/">-->
                    <p class="links-websitename">The National WWII Museum - New Orleans</p>
                    <!--</a>-->
                </div>
            </div>
            <div class="container" data-type="links-lowercontainer">
                <div class="container" data-type="links-lowerleftcontainer">
                    <p class="links-websitedescription">Imperial War Museums explores conflict from WW1 to the present day. Visit one of our 5 sites. Explore our archives to discover real stories of modern war</p>
                </div>
                <div class="container" data-type="links-lowercentrecontainer"></div>
                <div class="container" data-type="links-lowerrightcontainer">
                    <p class="links-websitedescription">The National WWII Museum tells the story of the American experience in the war that changed the world—why it was fought, how it was won, and what it means today—so that all generations will understand the price of freedom and be inspired by what they learn.</p>
                </div>
            </div>
     </div>
   </section>