JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapper'>
    <span class='visible'></span><span class='invisible'></span>
</div>

CSS

.wrapper {
    width: 200px;
    border: solid 1px;
    padding: 10px;
}
.visible {
    color: black;
} 

.invisible {
    color: transparent;
}

JavaScript

var text = "Whatever you want your text to be here. The text will always stay in place",
    soFar = "";

var visible = document.querySelector(".visible"),
    invisible = document.querySelector(".invisible");

invisible.innerHTML = text;
var t = setInterval(function(){
    soFar += text.substr(0, 1),
        text = text.substr(1);
    
    visible.innerHTML = soFar;
    invisible.innerHTML = text;
    
    if (text.length === 0) clearInterval(t);
}, 100)