Мне нужна помощь с позиционированием div. Структура HTML выглядит следующим образом:

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

И у меня есть следующий CSS:

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

Ширина и высота левого div является динамической.

Чего я хочу достичь:

Сделайте высоту правого div равной высоте левого div.Сделайте ширину правого div заполнить оставшуюся часть div с классомitem.Абзац с классомbottom должно быть внизу справа div.

Вот простое изображение, которое представляет мою цель:

И ссылка наJSFiddle demo.