align next to next line

December 5, 2021

How do we set in css that the text should be on the next line

output should be like this
enter image description here

#curret output

Financing Contigency Site Plan Approval Contigency

#target

Financing Contigency 
Site Plan Approval Contigency

#Code

 <div class="buyer-details-info-field" style="padding-top: 15px;">
            <div class="opacity54">Contingencies</div>
            <span *ngIf="dealData.dealTypeValues.isFinancingContingency" style="font-size:12px;margin-left: 8px;" class="value">Financing Contigency</span>
            <span *ngIf="dealData.dealTypeValues.isSitePlanApprovalContingency" style="font-size:12px;margin-left: 8px;" class="value">Site Plan Approval Contigency</span>
          </div>

>Solution :

You should use display: block value in your CSS. Here, I apply them for all <span>, but you can add it to your value css’s class.

Also, in this example, I remove the *ngIf to make it more clear.

.buyer-details-info-field {
   display: flex;
   height: 28px;
   margin-left: 16px;
   align-items: center;
}

span {
   display: block;
}

<div class="buyer-details-info-field" style="padding-top: 15px; display: block;">
   <div class="opacity54">Contingencies</div>
   <span style="font-size:12px;margin-left: 8px;" class="value">Financing Contigency</span>
   <span style="font-size:12px;margin-left: 8px;" class="value">Site Plan Approval Contigency</span>
</div>

You can also just use <br>, with display: contents and such as you want to put them on the right, with float: right it’s fine :

.buyer-details-info-field {
   display: flex;
   height: 28px;
   margin-left: 16px;
   align-items: center;
}

.value {
   float: right;
}

.opacity54 {
   float: left;
}

<div class="buyer-details-info-field" style="padding-top: 15px; display: contents;">
   <div class="opacity54">Contingencies</div>
   <span style="font-size:12px;margin-left: 8px;" class="value">Financing Contigency</span><br>
   <span style="font-size:12px;margin-left: 8px;" class="value">Site Plan Approval Contigency</span>
</div>