title: How to align items above and below each other within one flexbox?
body: <p>I'm currently trying to align the number <code>238,741</code> and the letter <code>N</code> in Number. Currently I have a padding between the <code>Prize Pool</code> div and the <code>Number Active</code> div. They're all contained within a parent with display set to flex and flex-direction: column. They're then within another parent container with display flex and direction set to row. I tried setting different paddings between the divs but when I zoom in or out they don't maintain their position.</p>
  
  <p>I cannot figure out how to make them align and stay aligned when zooming in and out or going into mobile view. I've spent 7 hours on it and made little progress by going through CSS tricks.</p>
  
  <p>Code:</p>
  
  <pre><code>  &lt;Wrapper&gt;
      &lt;HeaderWrapper row alignItems="center"&gt;
        &lt;PrizeText variant={TextVariant.subhead}&gt;Prize Pool&lt;/PrizeText&gt;
        &lt;Text color={TextColor.primary} fontWeight="600" variant={TextVariant.subhead}&gt;Number Active&lt;/Text&gt;
        &lt;GoldText style={{'padding-right': '26%'}} variant={TextVariant.display}&gt;$7,162,245&lt;/GoldText&gt;
        &lt;GoldText color={TextColor.primary} variant={TextVariant.display}&gt;238,741&lt;/GoldText&gt;
      &lt;/HeaderWrapper&gt;
    &lt;/Wrapper&gt;
  </code></pre>
  
  <pre><code>const HeaderWrapper = styled(Box)`
    height: auto;
    align-items: flex-start;
    /* border: 2px solid white; */
    flex-wrap: wrap;
    margin-top: 45px;
    margin-left: 32px;
  
  `;
  const MoneyWrapper = styled(Box)`
    height: auto;
    align-items: flex-start;
    /* border: 2px solid white; */
    flex-wrap: wrap;
    margin-left: 32px;
  
  `;
  
  const GoldText = styled(Text)`
    background-image: linear-gradient(98.84deg, #C9882B 0%, #E7CA66 47.71%, #C69935 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    white-space: nowrap;
  `;
  
  const PrizeText = styled(Text)`
    padding-right: 152px;
    color: ${props =&gt; props.theme.palette.text.primary};
    font-weight: 600;
    white-space: nowrap;
  `;
  
  const Wrapper = styled(Box)`
    position: relative;
    border: 2px solid white;
    width: 100%;
    /* justify-content: center; */
    align-items: center;
  `;
  
  </code></pre>
  
  <p>A Box is just a div, with display set to flex and can take the prop col or row to change the flex direction.</p>
  
  <p><a href="https://i.stack.imgur.com/TlgzL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TlgzL.png" alt="enter image description here"></a></p>