当第一个孩子的身高较小时，水平对齐Flex项目

Question

我在一个包装div中有两个div，它们与flex box水平对齐。我希望如此左手侧div的高度较小，并且右手侧的div重叠。问题是让第一个flex项（红色框）以％单位接受不同的高度。

我已经包含了代码，但为了快速参考我已经包含了一个图像： 图1现在是怎样的。图2是我想要它的样子。

注意事项 - 我无法删除包装div（#row-1），我确实需要使用flex box，即不能浮动。

body {margin: 0; width: 100%; height: 100vh; display:flex; justify-content: center; align-items: center;}

/* ---- WRAPPER ---- */

#row-1 {
  display:flex;

}

/* ---- RED COLUMN ----- */

.two-col.col-1 {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 3rem 1rem;
  background: red;
  color: white;
  box-sizing: border-box;
  height: 50%;
}

/*---- LIGHT BLUE COLUMN ---- */

.two-col.col-2 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  box-sizing: border-box;
}

<div class="row" id="row-1">
    <div class="two-col col-1">
        <h3 class="tl">A Title</h3>
        <p class="tl">Something profound about cheese</p> 
    </div>
    <div class="two-col col-2">
        <div>-- An image --</div>
    </div>
</div>