Wisdom

Latest comments

• 

  Dean Hudek•290

  @deksa89

  Submitted about 3 years ago

  

  Order summary

  2

  70
  

  Wisdom•80

  @Abasiekong

  Posted about 3 years ago

  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!

  1

  Marked as helpful