I have the following piece of code in my component

          if (buyer !== null) {
            return (
              <Card>
                <li key={sale_id}>
                  <h3>
                    <Transaction>{seller}</Transaction> just sold item number{' '}
                    <Transaction>{sale_id}</Transaction> to{' '}
                    <Transaction>{buyer}</Transaction> for{' '}
                    <Transaction>{formatNumber(listing_price)}</Transaction>{' '}
                    {listing_symbol} at {parseTimestampJM(created_at_time)}
                  </h3>
                </li>
              </Card>
            );
          }

the Transaction and Card components are made of the following code :

export const Card = styled.article`
  width: 100%;
  height: 144px;
  border-radius: 16px;
  border: solid 1px #e6e6e6;
  display: flex;
  align-items: center;

  @media (max-width: 1300px) {
    justify-content: center;
  }

  ${breakpoint.mobile`
    justify-content: flex-start;
  `}
`;

export const Transaction = styled.h2`
  font-size: 15px;
  fontweight: 'bold';
  color: purple;
  margin-bottom: 8px;

  ${breakpoint.tablet`
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 4px;
  `}

  ${breakpoint.mobile`
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 8px;
  `}
`;

This is resulting in a card that flexes with the webpage width but I can't get the text to fit in right. The text is stacking on top of each other. Seller is on just sold.. which is on Sale-id ... etc. I would like just one line of text where it becomes two if the card is to small to fit the text in it.