Wisdom• 80
@Abasiekong
Posted
First, you need to understand the visual layout of how elements are placed.
In this case, I would suggest wrapping the Annual plan text and Pricing in a parent element:
<div class="pricing-plan">
<p class="pricing-plan--heading">Annual Plan</p>
<p class="pricing-plan--sub-heading">$59.99/year</p>
</div>
When you're done you then wrap the the Music Icon, Pricing Plan & Change button, make them share the same parent element, like this:
<div class="summary-order-pricing">
<img src="images/icon-music.svg" alt="Music Icon">
<div class="pricing-plan">
<p class="pricing-plan--heading">Annual Plan</p>
<p class="pricing-plan--sub-heading">$59.99/year</p>
</div>
<a href="#" class="btn-change">Change</a>
</div>
From this point, you could set the display property of the summary-order-pricing block to display as a flex container:
.summary-order-pricing {
display: flex;
}
and you're all set!
Marked as helpful
1
