调整卡片宽度以适应未溢出的内容文本

Question

我尝试使用语义UI卡创建一个帐户弹出窗口，灵感来自他们的cards example：

<div class="ui compact raised card">
  <div class="content">
    <img class="ui right floated image" src="http://placehold.it/100">
    <div class="header">Foo Bar</div>
    <div class="meta">foo.bar@example.com</div>
    <div class="ui primary basic profile button">
      <i class="fitted user icon"></i>
      My Account
    </div>
  </div>
  <div class="extra content">
    <a href="#"><i class="ui fitted sign out icon"></i>Sign Out</a>
  </div>
</div>

可运行的示例：

在CodePen上可用，有几个标题/元长度可视化布局问题。

问题：

headers / meta的更长内容溢出。

我想要的是什么：

我希望扩展卡片宽度以保持布局完好无损。我需要在CSS和/或HTML结构中进行哪些更改才能做到这一点？

我发现在卡片上使用display: table允许更长的文字扩展卡片宽度，但仅限于没有right floated图片时。图像的存在仍然包含文本。

在CodePen中，CSS选择器.ui.compact.card包含卡的理想目标宽度，可用于查看所需效果。

要求：

• 仅CSS / CSS3，这不应该是一个Javascript工作（即：没有jQuery）。
• 浏览器兼容性：IE9 +