I have a <p> element that is empty, how do I give it height and not push elements down when I fill the element with text during execution?

Question

When the user does things with the app, I want to have an annoying <p> element telling what they just did. So I devised a simple code to show my problem. Every time I put text into my initially empty <p> tag, it pushes everything else on the screen down when it finally has text and height. Is there a way to force the <p> tag to have height and take up its space without the text in it? I have tried putting it in a div and doing a clear fix on it even with no floats. I have tried ::before and ::after with content: "". All of my other attempts have failed as well. I know that I could put some text in it, either a single space or text with the same color as the background to force it to work, but I was trying to find a more elegant solution. Is there one?

const actionButton = document.getElementById("actionButton");

let flashSomeText = function() {
  const flashTextEl = document.getElementById("popupText");

  flashTextEl.textContent = "You Just Got Paid";
  flashTextEl.style.background = "rgb(18, 163, 49)";
  flashTextEl.style.color = "white";

  let unflashSomeText = function() {
    flashTextEl.textContent = ""
    flashTextEl.style.background = "white";
    flashTextEl.style.color = "black"
  };
  setTimeout(unflashSomeText, 1500);

};
actionButton.addEventListener("click", flashSomeText);

@charset "utf-8";
body {
  background: rgb(211, 211, 211);
  max-width: 1680px;
  height: 100vh;
}

#wrapper {
  background: white;
  width: 90%;
  margin: 0 auto;
  min-height: 100%;
}

header>h1 {
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 0;
  text-align: center;
}

#popupText {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

#actionButtonDiv {
  margin-top: 10px;
  text-align: center;
}

#footerText {
  text-align: center;
}

<div id="wrapper">
  <header>
    <h1>Some Header Text</h1>
  </header>
  <p id="popupText"></p>
  <div id="actionButtonDiv">
    <button type="button" id="actionButton">Flash Text</button>
  </div>
  <footer id="footerText">
    <p>Some Footer Text</p>
  </footer>
</div>

Answer 1

Add a linebreak to your empty <p> tag with <br>

<p id="popupText"><br></p>

Also while unflashing, set the innerHTML (replace .textContent with innerHTML) of this <p> tag to <br>

let unflashSomeText = function() {
  flashTextEl.innerHTML = "<br>"
  flashTextEl.style.background = "white";
  flashTextEl.style.color = "black"
};

---

Full code:

const actionButton = document.getElementById("actionButton");

let flashSomeText = function() {
  const flashTextEl = document.getElementById("popupText");

  flashTextEl.textContent = "You Just Got Paid";
  flashTextEl.style.background = "rgb(18, 163, 49)";
  flashTextEl.style.color = "white";

  let unflashSomeText = function() {
    // resetting the text content to a linebreak again
    flashTextEl.innerHTML = "<br>"
    flashTextEl.style.background = "white";
    flashTextEl.style.color = "black"
  };
  setTimeout(unflashSomeText, 1500);

};
actionButton.addEventListener("click", flashSomeText);

@charset "utf-8";
body {
  background: rgb(211, 211, 211);
  max-width: 1680px;
  height: 100vh;
}

#wrapper {
  background: white;
  width: 90%;
  margin: 0 auto;
  min-height: 100%;
}

header>h1 {
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 0;
  text-align: center;
}

#popupText {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

#actionButtonDiv {
  margin-top: 10px;
  text-align: center;
}

#footerText {
  text-align: center;
}

<div id="wrapper">
  <header>
    <h1>Some Header Text</h1>
  </header>
  <!-- replacing empty text with a linebreak -->
  <p id="popupText"><br></p>
  <div id="actionButtonDiv">
    <button type="button" id="actionButton">Flash Text</button>
  </div>
  <footer id="footerText">
    <p>Some Footer Text</p>
  </footer>
</div>