调整元素的宽度，使其位于其旁边的另一个元素（或div）的内容的基础上

Question

我有两个垂直div，一个在左边，一个在右边。左边的div包含在让我们说半页之后结束的文本。我想让我的右边div表现得像这样：只要左边的div继续向下，就填充左边div的右边的内容。但是当左边的div结束时，右边的div应该填满整个页面。这是因为右div比左div长得多，我想避免在div左边结束并且用户必须向下滚动太多之后右边的div继续狭窄。有没有办法实现我的目标？

以下是该视图的当前haml代码：

%div.leftbox
  Here is the text in the leftbox
%div.rightbox
  Here is the much longer content of the right box

我的CSS是：

.leftbox {
  display: inline-block;
  font-size: 16px;
  margin: 10px 10px 10px 30px;
  width: 485px;
}
.rightbox {
  display: inline;
  float: right;
  margin: 20px 70px 10px 8px;
  width: 355px;
}