When my API call returns a lengthy product description, it may be too big to fit inside my div. Here is my original div structure:
<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>
This is how it currently appears:
https://i.sstatic.net/9Qjng.png
Upon clicking the 'Ler mais' button, the text should expand to display the full content, resizing the div if necessary. Here is the expected layout after clicking the button:
https://i.sstatic.net/mJcuZ.png
I want the first two paragraphs to show the entire Lorem Ipsum text within the div, even if it requires increasing its height.