如何使用CSS将2个span的上下对齐和top的文本对齐

Question

div容器，具有2个跨度。 2个跨度是顶部/底部布局。顶部跨度文本位于底部，但两次尝试均不起作用。

看图片。期望“ Essantial ...”（div文本位于底部，不能正常工作）接近底部文本“ Master ....”（div文本位于顶部。没有问题）

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

怎么了？

1）努力1

.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 {

}

2）努力2。

尝试使用“父级div：相对”，子级跨度， 不确定“ display：flex”是否与“ position：relative”冲突

.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 {

}

Answer 1

html

backupDBFiles

css

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

此处https://codepen.io/phong18/pen/WNeORoV

演示