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

Issue

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

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!

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;
}

Answered By - kimia shahbaghi

Answer Checked By - David Goodson (PHPFixing Volunteer)