How do I move one item under another in Flexbox? I am trying to get the price under the annual plan

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 class="paymentsection">
  <img src="/images/icon-music.svg" alt="Music" class="icon-img" />
  <div class="plan-container"> 
    <div class="plan">Annual Plan</div>
    <div class="price">$59.99/year</div>
  </div>
  <a href="">Change</a>
</div>

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

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 class="paymentsection">
    <img src="/images/icon-music.svg" alt="Music" class="icon-img" />
    <div class="plan-wrapper">
        <div class="plan">Annual Plan</div>
        <div class="price">$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.

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 class="paymentsection">
  <img src="/images/icon-music.svg" alt="Music" class="icon-img" />
  <div class="pricing">
     <div class="plan">Annual Plan</div>
     <div class="price">$59.99/year</div>
  </div>
</div>
<a href="">Change</a>

Styles for pricing class:

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