I have two blocks next to each other in my design but one of them longer (different height) than the other. I like to see these in the same size (same height).

Just a simple design technique which is pretty easy with tables, but how can I do it with only css (no JavaScript pls)?

For example:
Code:
 
.Box {font-size: 11px; border: 1px solid #ABC0CD; background:#F4F6FA;}
.Left {float:left; width: 20%; background:#DFE7EC; color:#666666;}
.Right {right:0;}

 
<div class=Box>
  <div class=Left>
  </div>
  <div class=Right>
  </div>
</div>
If the Left box higher(longer) than the Right box, it will overlap the parent Box.

Thanks for any suggestions,