I'm trying to recreate a common technique of splitting words into separate HTML elements so that they can be positioned individually via animation.

The problem I'm having is that I lose the spacing between the words when they are split into separate elements. I can add spacing by rendering withafter each word, or by adding padding to each element, but I'd like to know if there is a way to do this without manually adding spacing/ Curving them onto the container and retaining the original spacing?

I know there are plugins like gsap SplitText, but I was hoping for a non-plugin solution.

Code pen is here.

const App = () => { const line = 'this is a line of text.'; const renderLine = line.split(' ').map((word, i) => { return ( {word}  ) }) return ( 
{renderLine}
 ) }