Height of div increase with relative div

Question

I have parent div, inside of parent div i have two child both have property diplay:inline-block. When content increase in the right side child then right side child height automatically adjust but left side child height not adjust

Here is my code structure

<div class="maskbody">
  <div class="leftchild"></div>
  <div class="rightchild"></div>
</div>

Here is my css

.maskbody
 {
   width: 600px;
   height: auto;
   overflow: hidden;
   position: relative;
   top: 25%;
   background-color: #fff;
}

.leftchild
 {
   display: inline-block;
   background-color:red;
 }

 .rightchild
 {
   display: inline-block;
   background-color:#fff;
 }

So i want that if the rightchild content is increases then leftchild height is automatically increases

Answer 1

Use display:table-cell instead display:inline-block.

 .leftchild
{
 display: table-cell;
 background-color:red;
}

.rightchild
{
display: table-cell;
background-color:green;
}

DEMO