Justify content space-between, content which animates linearly, does not leave space when more items are inserted

Question

Im trying to achieve this.

End Goal

But when there are more than 2 items or they are really long they stick together, I suspect that the space in which they are deployed its to small so their behaviour goes to that. I've tried a few things but I don't get to a solution.

What ends up happening

This is part of the HTML* (I'm using React). The "TextWrapper" is based on a ul tag and the "Text" is based on a li tag. You can see further down in the code.

<TextWrapper>
     <Text> sahfdgfkjus bfkasascef efsaecfs efcsaecfarygadr</Text>
     <Text> re aser swtfas4 tsfgase tawe4 srgsagsefgas </Text>
</TextWrapper> 

This is the CSS I'm using

export const TextWrapper = styled.ul`
    position: absolute;

    display: flex;
    justify-content: space-between;
    
    margin: 0px;
    list-style-type: none;

    padding-top: 9px;
    padding-bottom: 1px;
    padding-left: 0px;

    left: 98px;
    right: 0px;

    width: auto;
    height: 30px;

    overflow: hidden;
`;

export const Text = styled.li`
    position: relative;

    opacity: var(--highEmphasis);
    font-size: var(--fontMed);
    background: none;

    white-space: nowrap;

    animation: floatText 15s infinite linear;

    @keyframes floatText{
        from {
            right: -100%;
        }

        to {
            right: 100%;
        }
    }
`;

Answer 1

Try giving your text element "width:100vw" value