如何使用 CSS 将 2 个跨度从上到下对齐，并在底部对齐顶部跨度文本

Question

div 具有 2 个跨度的容器。 2 个跨度是 top/bottom 布局。底部的顶部跨度文本，但尝试 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。

尝试使用"parent div: relative"，child span，不确定 "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

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

css

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

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

如何使用 CSS 将 2 个跨度从上到下对齐，并在底部对齐顶部跨度文本

How to use CSS to align 2 span top to bottom and top span text at bottom

css

text-alignment