Preserve the line when it's empty

[codergautam]

I am trying to have multiple animations in a div, problem is that when one is empty it becomes and empty line making the other elements move. how can I prevent this?

Here is a video

Thanks

https://user-images.githubusercontent.com/66850133/212493336-835363c3-80a6-4f68-99b9-3d6513b809ed.mp4

[codergautam]

Update, I was able to fix this by adding

display: inline-block;

[jullysuvariya]

@codergautam I added inline-block but still it is moving elements when line is empty. Can you share code snippet how did you fix this?

My code looks like this

return (

        <div className='flex flex-col h-screen text-center'>
            <div className='bg-cerulean w-full py-64'>
                <h6 className='text-5xl text-white'>Western Stand For</h6>
                    <TypeAnimation
                        sequence={[
                            'Innovation',
                            2000, 
                            'Precision',
                            2000,
                            'Commitment',
                            2000,
                            'Excellence',
                            2000
                        ]}
                        wrapper="h6"
                        speed={15}
                        cursor={false}
                        className='inline-block text-8xl text-white'
                        repeat={Infinity}
                    />
            </div>
        </div>

    )