I wanted to shrink the cta-content text to the second line if two buttons are present in the cta-wrapper
I wanted to display cta-content in single line if only one button.
I tried to give width to cta-content but its shrinking both the div. Please suggest me if this can be done without Javascript & changing the HTML mock-up(HTML can be changed but it should be same for both)
.cta-module {
text-align: center;
}
.cta-module .cta-wrapper {
display: flex;
justify-content: center;
margin: 0 auto;
align-items: center;
flex-wrap: wrap;
}
.cta-module .cta-wrapper .cta-content p {
margin: 0;
}
.cta-module .cta-wrapper .cta-button {
margin-right: 1rem;
}<div class="cta-module">
<div class="bottom-divider standard-spacing">
<div class="cta-title">
<h2>Looking for Health EFPPOS Solutions?</h2>
</div>
<div class="cta-wrapper">
<div class="cta-content">
<p>Our mobile EFTPOS facilities are convenient, portable and secure </p>
</div>
<div class="cta-button">
<a class="button_primary" href="#">Apply</a>
</div>
<div class="cta-button">
<a class="button_secondary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="bottom-divider standard-spacing">
<div class="cta-title">
<h2>Looking for Health EFPPOS Solutions?</h2>
</div>
<div class="cta-wrapper">
<div class="cta-content">
<p>Our mobile EFTPOS facilities are convenient, portable and secure </p>
</div>
<div class="cta-button">
<a class="button_primary" href="#">Apply</a>
</div>
</div>
</div>
</div>