having issues applying flexbox

I'm having some issues applying flexbox on a div.

here is the problem :

<div class="annual-plan">
        <div class="icon">
          <i class="fas fa-music"></i>
        </div>
        <div class="pricing">
          <h3>Annual Plan</h3>
          <span>$59.99/year</span>
        </div>
        <a href="#">Change</a>
 </div>

this whole code is wrapped in div with a class named content-section

i tried targeting it with css using the following :

.content-section .annual-plan .pricing{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

but still doesn't take effect, and you can see no space between.

I checked the dev tools of chrome and it's not overridden by any other code.

what did I do wrong and how can I fix it?

Solution

Remove the default padding on h3 and nest your code in a container then apply flex-boxes to each, and use justify-content: space-between; to space your elements.

.annual-plan {
    background-color: lightgrey;
    border-radius: 30px;
    width: 400px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}

h3 {
  margin-bottom: .5rem;
}

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0px;
 }

<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<div class="container">
<div class="annual-plan">
        <div class="icon">
          <i class="fas fa-music">Logo</i>
        </div>
        <div class="pricing">
          <h3>Annual Plan</h3>
          <span>$59.99/year</span>
        </div>
        <a href="#">Change</a>
 </div>
 </div>