title: Justify-content: space-between not applying on nested flex box
body: <p>I am styling a cart in angular. I am trying to get the price to be all the way to the right of the cart however it is not applying.</p>
  <p>I tried using space-between and I tested it on the outer div and it worked, but when I try to apply on the inner div it doesn't work. What am I missing or just plain not understanding here?</p>
  <p>here is a pen of the code
  <a href="https://codepen.io/awschneider-dev/pen/rNedLJg" rel="nofollow noreferrer">https://codepen.io/awschneider-dev/pen/rNedLJg</a></p>
  <p>HTML Below</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;h2&gt;Cart&lt;/h2&gt;
      &lt;div class=&quot;cartProducts&quot; *ngFor=&quot;let item of items&quot;&gt;
          &lt;!-- &lt;input type=&quot;checkbox&quot; name=&quot;deleteItem&quot; id=&quot;&quot;&gt; --&gt;
          &lt;hr&gt;
          &lt;div class=&quot;item&quot;&gt;
              &lt;div class=&quot;itemImage&quot;&gt;
                  &lt;img class=&quot;productImage&quot; src=&quot;../../assets/images/phones/{{item.image}}&quot; alt=&quot;&quot;/&gt;
              &lt;/div&gt;
              &lt;div class=&quot;information&quot;&gt;
                  &lt;div class=&quot;description&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;fakeLink&quot;&gt;Link to Item Page&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;price&quot;&gt;
                      {{item.price | currency}}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS Below</p>
  <pre><code>div.item{
      display: flex;
      
  }
  
  div.information{
      display: flex;
      justify-content: space-between;
      flex-direction: row;
  }
  
  div.container{
      max-width: 1080px;
      margin-left: auto;
      margin-right: auto;
  }
  
  div.itemImage{
      min-width: 150px;
  }
  
  img.productImage{
      max-width: 100px;
      max-height: 150px;
      margin: 10px;
  }
  
  hr { 
      display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: 1.0em;
      margin-right: 1.0em;
      border-style: inset;
      border-width: 1px;
      border: 0;
      height: 1px;
      background: #333;
      background-image: linear-gradient(to right, #ccc, #333, #ccc);
    } 
  
    a.fakeLink{
        font-weight: 750;
        font-size: larger;
        text-decoration: none;
        color: #0645AD;
    }
  </code></pre>
  <p>Resources I accessed below.</p>
  <p><a href="https://stackoverflow.com/questions/59153729/how-to-fix-flex-box-with-justify-content-space-between">How to fix flex box with justify-content space between</a></p>
  <p><a href="https://stackoverflow.com/questions/59579406/justify-content-space-between-works-incorrect">Justify-content: space-between works incorrect</a></p>
  <p>Any and all help would be appreciated.</p>