1

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!

2 Answers 2

1

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

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

<div class="priceinfo">
        <img src="order-summary-component-main/images/icon-music.svg" />
        <span class="annual">Annual plan</span><br/>
        <span class="price">&#x24; 59.99/year</span><br/>
        <a class="change" href="">Change</a>
</div>
1
  • Hi! I have tried this already (it was my first idea) but the second span is still in the same line as the first one :(
    – Magdalena
    Nov 5, 2022 at 17:36

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.