如何使用CSS将2跨上下对齐，并在底部对齐上跨文本

具有2个跨距的div容器。2跨为顶部/底部布局。顶部跨文本位于底部，但不适用于2次尝试

见图。期望“Essential…”（div text Expect在底部，不起作用）接近底部文本“Master…”（div text在顶部，无问题）

怎么了

1） 努力#1

2） 努力#2

尝试使用“父div:relative”，子span， 不确定“显示：柔性”是否与“位置：相对”冲突

html

此处演示

html

---

此处演示

我会回来，但relative不应与flex一起使用。Flex是获取预期输出和html的正确方法吗？我会回来的，但是relative不应该与Flex一起使用。Flex是一种正确的方法，可以为预期的输出和使用的html对图像进行采样。谢谢你，很好。非常感谢。

 ----------------------------
 |Text here
 |
 |
 |
 |
 | (expect here)
 ----------------------------
 |
 |
 |
 |
 |
 ---------------------------

.div-container {
  /* To make 2 child span top/bottom alignment */
  display: flex;   
  justify-content: space-between;
  flex-direction: column;
}

.div-container > span.top {
  justify-content: left;
  align-items: flex-end;
}

.div-container > span.bottom {

}

.div-container {
  /* To make 2 child span top/bottom alignment */
  display: flex;   
  justify-content: space-between;
  flex-direction: column;

 /* But, top span text is at top
  * 
  * To make top span text at bottom. 
  */
  position: relative;
}


.div-container > span.top {
  position: absolute;
  bottom: 0;
  text-align: left;
}

.div-container > span.bottom {

}

<div class="div-container">
  <span class="top">Top text here</span>
  <span class="bottom">Bottom text here</span>
</div>

.div-container span{
  display: block;
  height: 50%;
}
.div-container{
  height: 500px;
}
.div-container span.top{
  display: flex;
  align-items: flex-end;
}