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

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