如何在nowrap内联元素旁边浮动元素

Question

我有一份文章清单。默认情况下，文章会折叠，以便其标题和内容在可用空间中显示为预览。文章可以展开或折叠。我想在折叠和展开模式下保持文章页脚中的元素可见。

这是一个快速模型： jsfiddle.net/vuByG/11/

我的问题是浮动元素在折叠模式下被推到内容下方。是否可以将按钮与文章对齐，以便折叠的文章与附加元素只占用一行？我可以将浮动元素放在内容上方，但它与它重叠，我不能总是预测该元素的宽度。

HTML：

<article class="collapsed">
    <header>
        <h1>Title</h1>
    </header>
     <div>
        <p>Some text.</p>
        <blockquote>Quote.</blockquote>
        <ul>
            <li>Anything.</li>
        </ul>
    </div>
    <footer>
        <time>yesterday</time>
    </footer>
</article>

CSS：

time {
  float: right;
  font-style: italic;
}
article {
  background-color: beige;
  cursor: pointer;
}
footer:after {
  content: "";
  display: table;
  clear: both;
}
.collapsed {
  white-space: nowrap;
  width: 13em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collapsed * {
  display: inline;
  margin: 0;
  padding: 0;
}