垂直对齐，水平宽度相互依赖

Question

似乎是一个简单明了的例子，它让我很适合。这是我正在拍摄的照片：

是我的HTML

<div class="container">
    <div class="caption">
        <div class="label">
            Products that matter
        </div>
        <div class="content">
            <p>Mauris leo diam, convallis at rhoncus at, pellentesque ut turpis. Nullam orci velit, dignissim a suscipit et, adipiscing vel magna. Mauris leo diam.</p>
        </div>
    </div>
</div>

和CSS

.container {
    width: 1000px;
    margin-top: 50px;
}
.caption {
    background: rgba(255,255,255,.9);
    display: table;
    width: 100%;
    height: 66px;
}
.caption .label {
    display: table-cell;
    background: #94749c;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
    font-weight: 400;
    width: auto;
    height: 66px;
    vertical-align: middle;
}
.caption .content {
    display: table-cell;
    width: auto;
    height: 66px;
    vertical-align: middle;
}

我认为在纯CSS中实现此功能的最佳方法是使用display：table和display table-cell。这样我们就可以得到适当的垂直对齐。问题是宽度。我最终想要的是紫色细胞适合文本的长度而小细胞系则会破裂。

Here's a JSFiddle example.

问题在于，根据次要单元格的长度，它会将主单元推入并导致换行。此外，如果缩短第二个单元格的长度，则主单元格会变得太大。

在没有javascript的情况下，我想要做的是让主单元格自动格式化其宽度而不会断行，然后根据需要在空格和换行符中填充辅助单元格。

思想？

Answer 1

似乎白色空间：nowrap是关键。

这很容易。