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

Question

div container with 2 spans. 2 spans are top/bottom layout. Top span text at bottom, but it does not work with 2 tries.

See picture. Expect "Essantial ..." (div text expect at bottom, not working) to be close to bottom text "Master...." (div text at top. No issue)

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

What's wrong?

1) Effort #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) Effort #2.

Try to use "parent div: relative", child span, Not sure if "display:flex" is conflict with "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;
}

Demo here https://codepen.io/phong18/pen/WNeORoV