title: Flex Layout Not Working as Intended With ngFor Loop
body: <p>I searched but couldn't find a question quite like mine.  Apologies if there's an answer somewhere.</p>
  
  <p>I'm attempting to do a very simple flex layout in row format where 2 containers are side by side.  I have a card component with an ngFor loop inside another component.  Here's my code:</p>
  
  <p>top-cta-HTML:</p>
  
  <pre><code>&lt;section id="cta-container"&gt;
    &lt;h1&gt;Take Control of Your Financial Future&lt;/h1&gt;
    &lt;h4&gt;
      Whether you’re looking at annuities to guarantee future income, &lt;br /&gt;save
      for a life change, or selling your structured settlement,&lt;br /&gt;
      we’re here to help with guidance, advice, and experience
    &lt;/h4&gt;
      &lt;app-cta-card&gt;&lt;/app-cta-card&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>top-cta-CSS:</p>
  
  <pre><code>#cta-container {
    margin: 2.5rem 0 0 auto;
    padding: 0 20px 0 5px;
    background-color: orange;
    width: 35%;
    border-bottom-left-radius: 60px;
    text-align: end;
  }
  
  #cta-container h1 {
    font-size: 2.75rem;
    font-weight: 900;
  }
  
  #cta-container h4 {
    margin-top: -20px;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5em;
  }
  </code></pre>
  
  <p>card-HTML:</p>
  
  <pre><code>&lt;article id="card-parent-container"&gt;
    &lt;div class="top-cta-card" *ngFor="let card of ctaCards"&gt;
      &lt;div class="cta-card-topper"&gt;1&lt;/div&gt;
      &lt;h3&gt;{{ card.title }}&lt;/h3&gt;
      &lt;a href="#" class="top-cta-links"&gt;&amp;#10132;&lt;/a&gt;
      &lt;p&gt;{{ card.description }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>card-CSS:</p>
  
  <pre><code>.top-cta-card {
    background-color: var(--cream);
    width: 300px;
  }
  
  #card-parent-container {
    display: flex;
    flex-direction: column;
  }
  
  .cta-card-topper {
    background-color: var(--teal);
    height: 100%;
    width: 100%;
    color: var(--teal);
  }
  
  .top-cta-links {
    background-color: var(--teal);
    color: var(--cream);
    padding: 5px 6px;
    border-radius: 50%;
    box-shadow: 3px 2px 3px var(--gunMetal50);
  }
  </code></pre>
  
  <p>This code produces 2 cards stacked on top of each other and no matter what I change they won't sit in row format.</p>
  
  <p>As a test, I made 2 divs inside the top-cta-HTML file with no ngFor loop and got the desired result.  Any ideas here on what I'm doing wrong?</p>
  
  <p>Thank you for any and all help, I really appreciate it!</p>