css - 对齐容器中的内容，并有条件地换行

Question

我正在构建一个元素，为了节省一些空间，我想这样放置我的内容:
换句话说:

Element A应始终向右对齐，位于文本下方

只要有足够的空间就应该“ float ”(前两个示例)

当没有空间时换行到下一行(底部示例)。

到目前为止，我已经尝试了两种不同的方式，两种方式都有一些不太正确的地方。 Here's a JSBin .
在第一个选项中， sibling ，2nd 和 3rd 不太正确:“元素 A”不是“ float ”(就像有两列)。
在第二个选项中，Inline、2nd 和 3rd 是正确的，但第一个不是(“Element A”被粘在左边)。
任何帮助表示赞赏!

Answer 1

将 width: 100% 添加到 p 元素

.container div {
  border: 1px solid #999;
  display: flex;
  justify-content: space-between;
  width: 260px;
  box-sizing: border-box;
  position: relative;
}

.container div p {
  float: left;
  width: 100%;
}

.container .elem {
  border: 1px solid;
  white-space: nowrap;
}

.container div p a {
  float: right;
}

<div class="container">
    <h2>Inline (Parent/Child)</h2>
    <div>
      <p class="text">Short text <a class="elem">Elemente A</a></p>
    </div>
    <div>
      <p class="text">Longer text that wraps two lines but then stops. <a class="elem">Elemente A</a></p>
    </div>
    <div>
      <p class="text">Longer text that wraps two lines, and keeps going till the end, and some more. <a class="elem">Elemente A</a></p>
    </div>
  </div>