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

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 to the next line. This is still in the same line with .

Here is my HTML code:

<div >
        <img src="order-summary-component-main/images/icon-music.svg" />
        <span >Annual plan</span>
        <span >&#x24; 59.99/year</span>
        <a  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!

CodePudding user response：

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


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

and CSS file:

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

CodePudding user response：

You can just add a line break (<br/>) after each span:

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