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">$ 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">$ 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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.