如何以仅使用CSS指示的方式定位此元素

Question

在响应式页面上，我需要添加一个白色容器，如下图所示：白色容器位于滑块顶部，但不会再向右移动到“容器”类的右边缘。

很难解释，但希望下面的图像和小提琴，我的问题应该是可以理解的。

如何放置这个白色容器，使其始终位于此位置，靠着“容器”类的右边缘，以及滑块底部，即使在减小窗口大小时也是如此？

See Fiddle

标记：

<div id="div1">
    <div class="container">
        content
        <br />content
        <br />content
    </div>
</div>
<div id="slider">
    <img src="http://lorempixel.com/1000/300/sports/" />
</div>

CSS：

.container {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(0,0,0,0.2)
}
#div1 {
    background: yellow;
}