title: How to use CSS to align 2 span top to bottom and top span text at bottom
body: <p><a href="https://i.stack.imgur.com/sBsqu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sBsqu.jpg" alt="enter image description here"></a>div container with 2 spans. 2 spans are top/bottom layout. Top span text at bottom, but it does not work with 2 tries.</p>
  
  <p>See picture. Expect "Essantial ..." (div text expect at bottom, not working) to be close to bottom text "Master...." (div text at top. No issue)</p>
  
  <pre><code> ----------------------------
   |Text here
   |
   |
   |
   |
   | (expect here)
   ----------------------------
   |
   |
   |
   |
   |
   ---------------------------
  </code></pre>
  
  <p>What's wrong?    </p>
  
  <p>1) Effort #1  </p>
  
  <pre><code>.div-container {
    /* To make 2 child span top/bottom alignment */
    display: flex;   
    justify-content: space-between;
    flex-direction: column;
  }
  
  .div-container &gt; span.top {
    justify-content: left;
    align-items: flex-end;
  }
  
  .div-container &gt; span.bottom {
  
  }
  </code></pre>
  
  <p>2) Effort #2. </p>
  
  <p>Try to use "parent div: relative", child span,
  Not sure if "display:flex" is conflict with  "position:relative"</p>
  
  <pre><code>.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 &gt; span.top {
    position: absolute;
    bottom: 0;
    text-align: left;
  }
  
  .div-container &gt; span.bottom {
  
  }
  </code></pre>