Как выровнять текст в промежутке, чтобы разделить на две строки, используя реагировать?

Question

Я хочу разместить текст в элементе span до двух строк. для этого я использую ширину для элемента span так, что текст будет переноситься на две строки. Как я могу сделать то же самое, не используя ширину. также, как я могу лучше изменить код ниже, чтобы что-то аккуратное и не много повторений.

Ниже, как это должно выглядеть

[![enter image description here][1]][1]

Ниже приведен код,

interface Props {
    marginLeft?: number;  
}

function Childcomponent({ marginLeft }: Props) {
    return (
        <Wrapper marginLeft={marginLeft}>
            <Container>
                <Text size={12} weight={700} color={some_var}>
                    comp
                </Text>
                <Text size={12} color={some_var}>
                    companyname
                </Text>
            </Container>
            <Text size={25} weight={700} color={some_var}>
                {some_text}
            </Text>
            <Text size={14} weight={700} color={some_var}>
                /10
            </Text>
            <BooksText size={12}>
                book items
            </Booksext>
            <Text size={25} weight={700} color={some_var}>
                {some_text1}
            </Text>
            <Text size={14} weight={700} color={some_var}>
                /10
            </Text>
            <PensText size={12}>
                pen items count
            </PensText>
        </Wrapper>
    );
}

const Wrapper = styled.div<{ marginLeft?: number }>`
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: ${props => props.marginLeft + 'px' || 0};
`;

 const Container = styled.div`
     display: flex;
     flex-direction: column;
     width: 162px;
     margin-left: 8px;
 `;

  const BooksText = styled(Text)`
      width: 58px;
      margin-left: 6px;
      margin-right: 8px;
  `;

   const PensText = styled(Text)`
       width: 65px;
       margin-left: 6px;
       margin-right: 8px;
  `;

Этот компонент Text возвращает элемент span.

Может кто-нибудь помочь мне исправить это. спасибо.