如何让星号div对齐文本节点末尾并适配换行（CSS方案）

背景 #

HTML由第三方生成且定期更新，无法使用JavaScript修改结构，只能通过CSS调整样式。

目标HTML结构 #

<div class="label">
  <div class="asterisk">*</div>
  I am a text node
</div>

初始无样式状态 #

无CSS时，星号会单独占据一行，显示在文本上方。

初始CSS尝试 #

为了让星号对齐到文本末尾，尝试使用flex布局：

.label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

该方案在文本不换行时可以正常显示，星号紧贴在文本右侧。

换行时的问题 #

当文本内容换行后，星号会错位到新行的开头，不符合预期。

期望效果 #

无论文本是否换行，星号始终紧跟在文本最后一行的末尾。

后续尝试更新 #

更新1 #

添加align-items: flex-end;后，星号位置更接近目标，但仍未紧贴最后一行文本末尾。

更新2 #

根据建议添加flex-wrap: wrap-reverse;后，效果有所改善，但依然没有达到理想状态。

内容的提问来源于stack exchange，提问作者Levi Cole