align next to next line

Question

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>

Does this answer your question? [How to line-break from css, without using
?](https://stackoverflow.com/questions/2703601/how-to-line-break-from-css-without-using-br) — Elikill58, Dec 04 '21 at 23:04

Elikill58 · Accepted Answer · 2021-12-04T23:44:02.197

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>

align next to next line

1 Answers1