CSS Bottom-Alignment von zwei Spannen innerhalb eines div

Question

Ich versuche, zwei Span-Elemente innerhalb eines div-Elements innerhalb eines ul-li-Kontextes nach unten auszurichten. Beide Bereiche sollten benachbart sein, ohne eine Pause zwischen ihnen. Zeilenumbruch sollte auf den zweiten Bereich beschränkt sein. Bei allen Lösungsversuchen wird entweder die zweite Spanne unter die erste oder die zweite Spanne unter die erste gelegt. Wie kann ich die beiden Spannweiten in einer "Kleinwagen-, Großbus-" Weise ausrichten?

CSS:

.div 
{ 
    display:table-cell; 
    text-align: left; 
    vertical-align: bottom; 
    white-space: nowrap; 
} 
.divBottomBoarder 
{ 
    top: 20px; 
    margin: 0px; 
    padding: 16px 2px 2px 2px; 
    display: inline-block; 
    border-width: 2px; 
    border-bottom: 2px black solid; 
    width: 100%; 
} 
.subject 
{ 
    color: white; 
    padding: 1px 3px 2px 3px; 
    margin-right: 10px; 
    background-color: rgb(64,128,128); 
    font-weight: bold; 
    float: left; 
    vertical-align: bottom; 
} 
.content 
{ 
    bottom: 0px; 
    text-align: left; 
    vertical-align: bottom; 
} 

HTML:

<ul> 
    <li> 
    <div class='divBottomBoarder'> 
    <span class='subject'>A Subject:</span> 
    <span class='content'>Extended descriptive text that could line-wrap. If it does, the content text should be left-justified, bottom-aligned with the subject text, dynamically extending upward as required, <b><i>without</i></b> wrapping below the Topic text. Also, the subject and content spans should not line-wrap. The list dot, subject text, and content text should all be bottom-aligned immediately above the bottom border.</span> 
    </div> 
    </li> 
    <ul> 
     <li> 
      <div class='divBottomBoarder'> 
      <span class='subject'>A Child Subject:</span> 
      <span class='content'>More descriptive text that could also line-wrap. Again, the content text should be left-justified, bottom-aligned with the subject text, dynamically extending upward as required, <b><i>without</i></b> wrapping below the subject text. Also, the subject and content spans should not line-wrap. The list dot, subject text, and content text should all be bottom-aligned immediately above the bottom border.</span> 
      </div> 
     </li> 
    </ul> 
</ul> 

Fiddle me this.

Answer 1

Sie können hinzufügen:

.divBottomBoarder { 
    display: flex; 
    align-items: flex-end; 
} 

https://jsfiddle.net/2mpb7493/1/