html - Inherit height from one div to another -

i want inherit height div content div information, not working, heres code. here's fiddle: http://jsfiddle.net/maximusperson/pssh3jzg/ red same height blue. html:

<div class="content">    <div class="information"><p>welcome website,<br>created me</p>    </div> </div> 

css:

.content {     position: absolute;     top: 100 % ;     left: 0;     width: 100 % ;     height: 50 % ;     background: white;     align-self: center;     margin: 0;     padding: 0;     background-color: blue; }  .information {     height: inherit;     font-size: 24 px;     font-family: serif;     font-color: black;     text-align: center;     vertical-align: middle;     background-color: red; } 

when provide height div (here, div.content) in percent, in relation parent of div, , again, believe parent of content div doesn't have height given @ all.

so giving height:inherit on div.information won't work you'd expect, i.e. class information have same height class content, instead div.information, given height: inherit, have 50% height of div.content.

but if provide div.content height in fixed units (percent relative unit) in pixels, div.information have exact same height div.content (inherit, speak).

here's fiddle.