css - 垂直对齐两列，较短和较长的文本

Question

这是我正在做的一个简单的 fiddle :

http://jsfiddle.net/acolombo/xxab2345/

HTML:

<div id="container">
    <div id="DivB">Just another text.</div>
    <div id="DivA">Lots and lots of text. Lots and lots of text.Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text.</div>
</div>

CSS:

#container {
    overflow: hidden;
}
#DivA {
    overflow: hidden;
    background: #ccc;
}
#DivB {
    float: right;
    background: #000;
    color: #FFF;
}

我尝试了很多方法来垂直对齐较短的文本和较长的文本，以保持一切响应，但我似乎找不到有效的解决方案。

我发现的所有类似问题都使用非动态的东西，比如说固定宽度、高度、边距或其他任何东西，这些解决方案对我的问题不起作用。谢谢!

编辑:对不起，我忘了写，较短的行仍然需要像我发布的例子一样保持它的大小，较长的文本需要除此之外缩小 当它保持静止时

Answer 1

在 flexbox 之上，您可以使用 display: table; 和 vertical-align http://jsfiddle.net/xxab2345/2/

甚至 display: inline; 或 display: inline-block; 和 vertical-align http://jsfiddle.net/xxab2345/3/