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

Question

У меня есть гибкий элемент div с другим содержимым. на основе этого содержимого ширина div увеличивается. Таким образом, это сдвигает родственный div (div рядом с ним) вправо. Я хочу, чтобы этот родственный div был зафиксирован в позиции независимо от предыдущей ширины div.

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

<FlexWrapper justify="flex-start">
    <Link>
      <span>
        Title
      </span>
    </Link>
    <PushingComponent marginLeft={32} />
  </FlexWrapper>

<FlexWrapper justify="center">
    <span>Name</span>
</FlexWrapper>


const FlexWrapper = styled.div<{
    justify: 'center' | 'flex-start' | 'flex-end';
    }>`
    flex: 1;
    display: flex;
    justify-content: ${props => props.justify};
    align-items: center;
`;

 function PushingComponent () {
     <Wrapper>
        <Container>
            <Comp>Comp</Comp>
            <span>Name</span>
        </Container>
        <View>
            <span>20</span>
            <span>/2</span>
        </View>
        <SomeText>first <br /><SubText>value value1</SubText>
        </SomeText>
        <Divider />
        <View>
            <span>20</span>
            <span>/2</span>
        </View>
        <SomeText>value <br /><SubText>value valu2</SubText>
        </SomeText>
    </Wrapper>

const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   height: 50px;
   margin-left: 32px;
   padding: 12px 16px;

`;

const Container = styled.div`
    display: flex;
    flex-direction: column;
    white-space: nowrap;
`;
 const View = styled.div`
     display: flex;
     flex-direction: row;
     align-items: baseline;
     margin-left: 16px;
     margin-top: 8px;
 `;

  const SomeText = styled.span`
      margin-left: 8px;
  `;

   const SubText = styled.span`
       white-space: nowrap;
   `;

    const Divider = styled.div`
        height: 37px;
        margin-left: 16px;
        border-left: 1px solid red;
    `;

Я хочу P PushComponent должен быть зафиксирован в одной позиции (не перемещен), хотя толкающий компонент имеет разную ширину.

или как я могу сделать этот толкающий компонент фиксированной шириной, подходящей для всех компонентов. обратите внимание, что цифры в теге View различаются ... они могут быть 1000 вместо 2. это главное, что может варьировать ширину толкающего компонента.

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