Faça div preencher o espaço restante do pai

Preciso de ajuda com o posicionamento de divs. A estrutura HTML é a seguinte:

<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>

E eu tenho o seguinte 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;
}

A largura e altura da div esquerda é dinâmica.

O que eu quero alcançar é:

Faça a altura da div direita igual à altura da div esquerda.Faça a largura do div direito preencher o resto do div com classeitem.O parágrafo com classebottom deve estar na parte inferior da div direita.

Aqui está uma imagem simples que representa meu objetivo:

E um link para umDemonstração JSFiddle.

questionAnswers(4)

yourAnswerToTheQuestion