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>

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>