Html 一个div中两个跨距的CSS底部对齐

我试图在ulli上下文中，将div元素中的两个span元素底部对齐。两个跨距应相邻，中间不得有中断。换行应约束到第二个跨距。解决方案的所有尝试要么将第二个跨距放在第一个跨距的下方，要么将第二个跨距线包裹在第一个跨距的下方。我怎样才能使两个跨度以“小车、大巴”的方式对齐

CSS:

HTML:

主题：
可以换行的扩展描述性文本。如果是这样，内容文本应该左对齐，底部与主题文本对齐，根据需要动态向上延伸，而不在主题文本下方换行。此外，主题和内容范围不应换行。列表点、主题文本和内容文本都应在底部边框的正上方底部对齐。



儿童主题：
更具描述性的文本，也可以换行。同样，内容文本应该左对齐，底部与主题文本对齐，根据需要动态向上延伸，而不在主题文本下方环绕。此外，主题和内容范围不应换行。列表点、主题文本和内容文本都应在底部边框的正上方底部对齐。

.

您可以添加以下内容：

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

谢谢！在主题区域添加“空白：nowrap；”正是我想要的！

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

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