Вертикальное выравнивание текста внутри контейнера, вложенного в другой контейнер. ⇐ CSS

[Anonymous]

Я использую контейнеры, и у меня есть элемент div с data-type="links-outercontainer", в который вложены еще 3 элемента div с атрибутами данных:

Код: Выделить всё

links-lowerleftcontainer

,links-lowercentrecontainer,links-lowerrightcontainer
Это позволяет мне добавить текст описания к link-lowerleftcontainer и ссылкам Столбцы -lowerrightcontainer,links-lowercentrecontainer по сути являются столбцом-разделителем.
Все выглядит так, как я хочу, за исключением того, что я изо всех сил пытаюсь выровнять по вертикали. поэтому текст в ссылках-lowerleftcontainer иlink-lowerrightcontainer располагается вертикально вверху. см. ниже
Изображение, показывающее проблему.
Я установил границы, чтобы показать ссылки-нижний левый контейнер и ссылки-нижний правый контейнер.
Я пробовал использовать:

Код: Выделить всё

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

в link-lowerleftcontainer, а также в link-lowerleftcontainer более высокого уровня, но без радости.
Я уверен, что упускаю что-то простое чтобы иметь возможность выровняться по верху. Надеюсь, кто-нибудь укажет мне правильное направление.
Я включил фрагменты HTML и CSS ниже:

Код: Выделить всё

.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;
}
}

Код: Выделить всё

World War 2 Links



Imperial War Museums



The National WWII Museum - New Orleans





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

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.

Подробнее здесь: https://stackoverflow.com/questions/793 ... nother-con