html - 将两个段落放在不同标题高度的相同位置

Question

我正在使用 CMS，并且有很多标题并不总是具有相同的行数。我想将内容对齐到彼此相邻的相同位置。

.row {
  display: flex;
  /* equal height of the children */
}

.col {
  flex: 1;
  /* additionally, equal width */
  padding: 1em;
  border: solid;
}

h1 {
  flex: 1;
  /* additionally, equal width */
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">
    <h1>test</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="col">
    <h1>test<br>2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
      <p></p>
  </div>
</div>

标签： htmlcssflexbox