Div's height expand with its content

Hello, First sorry for my english :S

I have a problem with the design.

I want a div (yellow) with a text with size hight but i have problem with div’s hight. I want that if my text is large my div height grow if my text is small my div height decreases

image

The code: http://play.ionic.io/app/9e1615dc72bc

<ion-content class="has-header padding" scroll="false"> <div class="row "> <div class="col" style="background-color:green"> <div class="" style="background-color:red"> A </div> <div class="" style="background-color:yellow; font-size: 200px;"> B </div> </div> <div class="col" style="background-color:green"> <div class="" style="background-color:red"> C </div> <div class="" style="background-color:yellow; font-size: 200px;"> D </div> </div> </div> <div class="row"> E </div> </ion-content>

What am I doing wrong?

very thx