无法在div中包装文本

Question

我正在尝试创建一个HTML，它应该如下所示： -

我能够做到这一点，但我有一个非常具体的要求，使得当第一个div的字体大小增加（即“毛利量”）时，div应该将文本包装在其中。 但是当相同的字体大小增加时，我得到如下的输出

这是我的代码

<div style="width:132.5px; height:140.5px;background-color:#759BA6;display:block;float:left;margin:3px">
  <div style="background-color:#759BA6;width:100%;height:50%;float:top;color: black;">
    <span style="font-style:bold;font-size:18.52px;line-height: -moz-block-height;text-align:center;word-wrap: break-word;width:100%;height:100%">Gross Margin Amount</span>
  </div>
  <div style="background-color:#084C61;font-style:bold;font-size:18.52px;line-height: -moz-block-height;text-align:center;width:100%;height:50%;color: white;float:bottom">
    <span style="font-size:13.52px"></span>2,483<span style="font-size:13.52px"></span>
  </div>
</div>

以下是我创建的fiddle以供参考。

我不知道该怎么做才能让第一个div将文本包装在其中。任何帮助都将不胜感激！

Answer 1

将div的高度设为100％：

$this->_permitted

fiddle