Flex布局下数据行空列导致列对齐异常问题求助

各位大佬好，我用Flex布局实现了一个类表格的列表组件，现在碰到个棘手的问题：当某一行的「Catch Phrase」列内容为空时，后面的Date和Frequency列会直接往左偏移，完全和表头的对应列对不上齐。我试着给相关元素加了flex-direction: column;和align-items: center;，但完全没起作用，实在摸不着头脑，来求助大家！

具体情况是：正常有内容的行（比如示例里的第1行），各列和表头对齐得好好的，但第2行因为Catch Phrase对应的<p>标签是空的，后面的列就整体左移，直接打乱了整个布局。

下面是我的完整代码，麻烦各位帮忙看看问题出在哪，怎么调整才能让空列时也保持和表头一致的对齐效果？

HTML代码 #

<!DOCTYPE html>
<html dir="ltr" lang="en">
<body>
  <div class="header-container">
    <div class="index"><span>Index</span></div>
    <div class="type"><span>Type</span></div>
    <div class="what">
      <div class="hc_what__base"><span>Catch Phrase</span></div>
      <div class="hc_what__date"><span>Date</span></div>
      <div class="hc_what__freq"><span>Frequency</span></div>
      <div class="hc_what__cost-holder"><span>Cost</span></div>
    </div>
    <div class="actions"></div>
  </div>
  <div class="kind-row">
    <div class="index">
      <p> 1 </p>
    </div>
    <div class="type">
      <div>
        <p>JKLKIOIOPIOIO</p>
      </div>
      <div>
        <p style="padding=4px;"> Date: 25/10/2004 </p>
      </div>
    </div>
    <div class="what">
      <div class="what__base">
        <p> Neque porro quisquam est qui dolorem ipsum quia... </p>
      </div>
      <div class="what__date">
        <span>
          <p> 25/04/2026 <span class="what-indicator blue"></span> </p>
        </span>
      </div>
      <div class="what__freq">
        <span>
          <p> Monthly </p>
        </span>
      </div>
      <div class="what__cost-holder">
        <div class="what__cost">
          <p> 541.25&nbsp;€ </p>
        </div>
      </div>
    </div>
    <div class="actions">
    </div>
  </div>
  <div class="kind-row kind-row-even">
    <div class="index">
      <p> 2 </p>
    </div>
    <div class="type">
      <div>
        <p>gfsfhgsgsgsg</p>
      </div>
      <div>
        <p style="padding=4px;"> Date: 25/10/2024 </p>
      </div>
    </div>
    <div class="what">
      <div class="what__base">
        <p> </p>
      </div>
      <div class="what__date">
        <span>
          <p> 25/04/2028 <span class="what-indicator blue"></span> </p>
        </span>
      </div>
      <div class="what__freq">
        <span>
          <p> Monthly </p>
        </span>
      </div>
      <div class="what__cost-holder">
        <div class="what__cost">
          <p> 620.00&nbsp;€ </p>
        </div>
      </div>
    </div>
    <div class="actions">
    </div>
  </div>
</body>
</html>

CSS代码 #

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

内容来源于stack exchange