如何根据动态生成的文本调整div高度以进行扩展？

Question

我通过服务的API调用收到产品说明。这个描述可能很大，不适合我的div。这是我最初的div：

<div class="div-info">
  <h1 class="equipment-name">Title</h1>
  <h4 class="equipment-city-state">{{equipment.coordinates.city}} - {{equipment.coordinates.state}}</h4>
  <ul class="equipment-price">
    <li>Foo</li>
    <li>Bar</li>
    <li>Test</li>
  </ul>
  <p class="equipment-city-state">{{equipment.coordinates.city}} - {{equipment.coordinates.state}}</p>
  <p class="service-description" [@visibilityChanged]="visibility[i]">{{equipment.description}}</p>
</div>

看起来像这样：

当用户点击＆＃39; Ler mais＆＃39;按钮应该显示文本，如果不适合div，应该增加div。这是用户点击按钮时的样子

我希望div中的两个第一段Lorem全部显示在isinstance(obj,type)内，即使必须增加div高度。