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

这似乎是一个简单、直截了当的例子，让我觉得很合适。这是我拍摄的照片：

这是我的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中实现这一点的最好方法是使用display:table和displaytable cell。这样我们可以得到适当的垂直对齐。问题是宽度。我最终想要的是紫色的单元格适合文本的长度，而次要的单元格线则会断裂

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

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

---

思考？

看来，空白：nowrap是关键

那很容易

.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;
}