How could I place a responsive, relative position button under JS typewriter text?

I’m new to web dev and am encountering an issue – I have text with a simple JS typewriter effect, and below it is a button with relative position (for responsiveness. Absolute position technically solved the problem on desktop, but on smaller screens, the button ran over the typewriter words.)

When the page first loads, the button jumps around because at first it has nothing to be relative to. Then when the typewriter text appears, the button jumps down really fast. It happens really quickly as soon as the page loads.

Thanks for any insight!

var quoteArray = ["My name is Sam, nice to meet you."];
var textPosition = 0; 
// speed in milliseconds
var speed = 50;
typewriter = () => {
  document.querySelector("#typewriter").innerHTML = quoteArray[0].substring(0, textPosition);
  
  if(textPosition++ != quoteArray[0].length)
    setTimeout(typewriter, speed);
}

window.addEventListener("load", typewriter)

a.linky {

display:inline-block;
padding:0.35em 1.2em;
border:0.1em solid black;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
font-weight:300;
color: black;
text-align:center;
transition: all 0.2s;
}

a.linky:hover {
  background-color: #555;
}

a.linky:active {
  background-color: black;
}

.aboutbuttonposition
{
  text-align: center;
  /*Made position relative to be responsive. */
  position: relative;
  padding-top:  30px;
}

/*Styling typewriter sentence.*/
#typewriter 
{
  font-size: 40px;
  text-align: center;
}

<!--Has corresponding javascript to create typewriter effect-->
<p id="typewriter"></p>

<!-- Messy button div -->
 <div class="aboutbuttonposition">
   <a href="#about" class="linky" id="aboutbutton">About Me</a>
 </div>