I am trying to get the price under the annual plan.

<div >
  <img src="/images/icon-music.svg" alt="Music"  />
  <div >Annual Plan</div>
  <div >$59.99/year</div>
</div>
<a href="">Change</a>

.paymentsection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

}final image

CodePudding user response：

The .plan and .price needs to be inside a div and then if display flex is applied to the paymentsection, you get your desired result.

<div >
  <img src="/images/icon-music.svg" alt="Music"  />
  <div > 
    <div >Annual Plan</div>
    <div >$59.99/year</div>
  </div>
  <a href="">Change</a>
</div>

 .paymentsection {
    display: flex;
    flex-direction: row;
  }
  
  .plan-container{
    flex-grow:1;
  }

CodePudding user response：

You need different flex boxes for implementation your image. Each flex box should have different direction. first you need to wrap your .plan div and .price div with another div. This help you to separate pricing component:

<div >
    <img src="/images/icon-music.svg" alt="Music"  />
    <div >
        <div >Annual Plan</div>
        <div >$59.99/year</div>
    </div>
</div>
<a href="">Change</a>

next you need to set flex direction to your new div element. this is your desire style:

 .paymentsection {
     display: flex;
 }
 .plan-wrapper{
     display: flex;
     flex-direction: column; /* default is row */
}

this changes should fix your issue.

CodePudding user response：

To have the pricing aligned below the text, you'd have to nest the div further and specify the styles of the nested div to be oriented vertically, i.e, flex-direction: column. You could do something like this:

<div >
  <img src="/images/icon-music.svg" alt="Music"  />
  <div >
     <div >Annual Plan</div>
     <div >$59.99/year</div>
  </div>
</div>
<a href="">Change</a>

Styles for pricing class:

.pricing{
  display:flex;
  flex-direction: column;
}