It's my 3th challenge and I am still a newbie. What is the best practice when dealing with multiple elements side by side (such as where Annual Plan, music icon, price and change are)??? Should we use position-relative to set them up or is there a better practice? I have feeling that I am missing something on that matter.
Any feedback is welcome.
Thank you! :D
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!