两个不同div的孩子的高度相同

Question

我有两个divs（.item），每个人都有divs（.sub-item）与孩子相同的数量。 .sub-items的内容可能有不同的高度，如下所示：

.content-3-container {
  display: flex;
}

.item {
  float: left;
  background-color: cornflowerblue;
}

.sub-item {
  padding: 5px;
}

<div class="content-3-container">
  <div class="item">
    <div class="sub-item">
      <span>Sub-Content 1</span>
      <br/>
      <span>Sub-Content 2</span>
    </div>
    <div class="sub-item">
      <span>Sub-Content 3</span>
    </div>
  </div>
  <div class="item">
    <div class="sub-item">
      <span>Sub-Content 4</span>
    </div>
    <div class="sub-item">
      <span>Sub-Content 5</span>
    </div>
  </div>
</div>

我的问题是如何使具有sub-item和Sub-Content 1 Sub-Content 2的{​​{1}}的高度与sub-item Sub-Content 4的高度相同？