Add the text to the second line using pseudo element - css

Question

I am trying to add text below an existing div id. How ever the white-space: pre-wrap; or adding html tags such as content:"\<br/> Lorem ipsome." does not move the text to the next line.
HTML and CSS part:
div.brand-amenity-value.economy.YV span.amenity-value:lang(en)::after {
margin-left: 0px;
white-space: pre-wrap;
content: '<p> (One date change free) </p>';
}
<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
<div><span class="spark-assistive-text">Yes</span></div>
<span class="amenity-value"><span data-translation="AED 100">AED 100</span></span></div>
Screen-shot of the text that needs to be on second line:

Answer 1

You don't need <p> or <br> tag. The pseudo-element ::after itself can be styled. In this case set display to block would work:
div.brand-amenity-value.economy.YV span.amenity-value::after {
margin-left: 0px;
white-space: pre-wrap;
content: '(One date change free)';
display: block;
}
<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
<div><span class="spark-assistive-text">Yes</span></div>
<span class="amenity-value"><span data-translation="AED 100">AED 100</span></span>
</div>
Or if this solution is not an option somehow, you can use \A to add a new line:
div.brand-amenity-value.economy.YV span.amenity-value::after {
margin-left: 0px;
white-space: pre-wrap;
content: '\A(One date change free)';
}
<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
<div><span class="spark-assistive-text">Yes</span></div>
<span class="amenity-value"><span data-translation="AED 100">AED 100</span></span>
</div>
Reference: https://www.w3.org/TR/CSS2/generate.html#content

Answer 2

You can consider position:absolute
div.brand-amenity-value.economy.YV span.amenity-value::after {
content: '(One date change free) ';
position:absolute;
top:100%;
left:0;
white-space:nowrap;
}
div.brand-amenity-value.economy.YV span.amenity-value{
position:relative;
display:inline-block;
}
<div class="brand-amenity-value economy YV" style="height: 70px; background-color: #f2f5e6;">
<div><span class="spark-assistive-text">Yes</span></div>
<span class="amenity-value"><span data-translation="AED 100">AED 100</span></span>
</div>