como alterar a altura de uma div dinamicamente com base em outra div usando css?

aqui está meu código

HTML:

<div class="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br /> Div2 ends
  </div>
  <div class="div3">
    Div3
  </div>
</div> 

CSS:

.div1 {
  width: 300px;
  height: auto;
  background-color: grey;
  border: 1px solid;
  overflow: auto;
}

.div2 {
  width: 150px;
  height: auto;
  background-color: #F4A460;
  float: left;
}

.div3 {
  width: 150px;
  height: auto;
  background-color: #FFFFE0;
  float: right;
}

Eu quero aumentar a altura do div3 dinamicamente.

por exemplo, se a altura de div1 for 500px, a altura de div3 deverá ser 500px. Eu sei que eu posso usar herdar, mas a coisa é altura de div1 é auto por isso não vai ajudar. aqui está meu violinohttp://jsfiddle.net/prashusuri/E4Zgj/1/ como fazer isso?

obrigado

questionAnswers(7)

yourAnswerToTheQuestion