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

[Anonymous]

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

justify-content: flex-start

align-content: flex-start
< п>в links-lowerleftcontainer, а также ссылки более высокого уровня-lowercontainer, но без радости.
Я уверен, что мне не хватает чего-то простого, чтобы можно было выровнять его по верху. Надеюсь, кто-нибудь укажет мне правильное направление.
Я включил фрагменты 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