HTML-теги неправильно выровнены в ряду. ⇐ Html

[Anonymous]

Это экран моей страницы
Страница
Как вы можете видеть, столбцы «Дата» и «Частота» не выровнены по предыдущей строке.
Похоже, что если элемент div в столбце «Ключевая фраза» в строке пуст, другие элементы div перемещаются влево.
Я попробовал добавить столбец flex-direction:; и выровнять элементы: по центру; но ничего не изменилось
Это пример

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

.header-container {
color: rgb(194, 60, 128);
background-color: #C2DAB8 !important;
font-size: 16px;
font-weight: bold;
min-height: 45px;
display: flex;
}

.header-container>div:first-child {
justify-content: center;
margin-right: 5px;
}

.header-container>div:nth-child(2),
.header-container>div:nth-child(3) div {
border-left: 3px solid white;
margin-left: -3px;
padding-right: 2px;
padding-left: 2px;
justify-content: center;
}

.kind-row>div:first-child {
justify-content: center;
margin-right: 5px;
}

.kind-row>div:nth-child(2),
.kind-row>div:nth-child(3) div {
margin-right: 5px;
margin-left: 5px;
}

.kind-row .no-data {
width: 100%;
display: flex;
flex-direction: column;
}

.kind-row .no-data>p {
margin: 4px;
text-align: center;
}

.kind-row,
.header-container {
font-family: 'Open Sans', sans-serif;
display: flex;
align-items: center;
padding: 5px;
}

.kind-row {
background-color: #f4f4f4;
border: 1px;
border-style: solid;
border-color: #e8e8e8;
}

.kind-row-even {
background-color: #ffffff;
}

.kind-row .index,
.header-container .index {
flex: 0.2;
padding-left: 8px;
padding-right: 8px;
display: flex;
justify-content: center;
}

.google-icon-md {
font-size: 30px;
}

.kind-row .type,
.header-container .type {
flex: 0.2;
text-align: center;
}

.header-container .type {
display: flex;
justify-content: center;
}

.kind-row .what,
.header-container .what {
margin: 0 10px;
flex: 0.5;
flex-direction: row;
display: flex;
justify-content: space-around;
align-items: center;
padding: 5px;
box-sizing: border-box;
min-width: 640px;
max-width: 640px;
}

.kind-row .what {
border-radius: 4px;
min-height: 47px;
}

.kind-row .actions,
.header-container .actions {
display: flex;
flex-direction: row;
align-items: center;
flex: 0.1;
}

.kind-row .actions>cc-icon-button,
.header-container .actions>cc-icon-button {
margin-right: 5px;
}

.hc_what__base,
.what__base {
display: flex;
align-items: center;
overflow: hidden;
}

.hc_what__base,
.what__base {
flex: 0.35;
}

.hc_what__date {
flex: 0.35;
display: flex;
justify-content: center;
}

.what__date {
flex: 0.35;
display: flex;
justify-content: center;
}

.hc_what__freq,
.what__freq {
flex: 0.25;
display: flex;
justify-content: center;
}

.what__base>cc-text {
flex: 1;
text-align: center;
text-transform: uppercase;
}

.hc_what__cost-holder,
.what__cost-holder {
flex: 0.2;
display: flex;
justify-content: center;
}

.what__cost {
padding: 0 20px;
border-radius: 4px;
height: 25px;
line-height: 25px;
text-align: center;
}

.what-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-left: 5px;
}

.blue {
background-color: #0000ff;
}

.transparent {
background-color:  transparent;
}

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

Index
Type

Catch Phrase
Date
Frequency
Cost






1


JKLKIOIOPIOIO

Date: 25/10/2004





Neque porro quisquam est qui dolorem ipsum quia...



25/04/2026






Monthly





541.25 €








2


gfsfhgsgsgsg

Date: 25/10/2024







25/04/2028






Weekly





1541.25 €

https://jsfiddle.net/02j3tqx9/3/

Подробнее здесь: https://stackoverflow.com/questions/796 ... y-in-a-row