How to make that one span goes to the next line in the same div?

this is my first question here and this is also one of my first codes ever so please be understanding 😀

I need to create something like this: https://i.stack.imgur.com/mH18n.png.

I don’t know what I can do to make span class="price" to the next line. This is still in the same line with class="annual".

Here is my HTML code:

<div class="priceinfo">
        <img src="order-summary-component-main/images/icon-music.svg" />
        <span class="annual">Annual plan</span>
        <span class="price">&#x24; 59.99/year</span>
        <a class="change" href="">Change</a>
</div>

And here is my CSS:

.priceinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Do you have any ideas what I did wrong and what can I correct?

Thank you in advance!

Thank you in advance!

>Solution :

you can wrap both of your spans in a div with display:’flex’ and set its direction to column:

<div class="priceinfo">
        <img src="order-summary-component-main/images/icon-music.svg" />
        <div class='price'>
           <span class="annual">Annual plan</span>
           <span class="price">&#x24; 59.99/year</span>
        </div>
        <a class="change" href="">Change</a>
</div>

and CSS file:

.priceinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
display: flex;
flex-direction: column;
}