html - CSS |匹配行内的动态 div 高度

Question

请随意改写我的问题标题，我想不出如何正确措辞。

有一些与 CSS 相关的问题。我有一个行元素(不要与 bootstrap 混淆，这是分开的)。在这里面我有两列。

这些列都是动态的，因为在调整大小时它们会改变高度。我怎样才能让 div 匹配最高的元素。

我正在尝试找到一种使用 Pure CSS 来完成此操作的方法。希望下图能更多地解释我的理论

下面是我的真实例子，我需要第一列(带有 in 的那一列)来匹配行中包含的表单 div 的高度

Answer 1

两种选择:

CSS 表格

.row {
  display: table;
  width: 500px; /* for demo */
  background-color: #eee;
  border-spacing: 5px;
}

.col {
  display: table-cell;
  vertical-align: top;
  padding: 5px;
  border: 1px solid red;
}

.col1 {
  width: 100px;
}

<div class="row">
  <div class="col col1">
    short column
  </div>
  <div class="col col2">
    long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
  </div>
</div>

并使用 CSS Flexbox

.row {
  display: flex;
  align-items: stretch;
  width: 500px;
}

.col {
  margin: 5px;
  padding: 5px;
  border: 1px solid red;
}

<div class="row">
  <div class="col col1">
    short column
  </div>
  <div class="col col2">
    long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
  </div>
</div>

这显然是精简到最基本的要素，里程数可能会因您的设计及其响应能力而异。