how do I make text that goes below the screen on left div (screen split in 2 divs left and right) write itself on right div instead

I'm working on a typewriter animation where text is dynamically written in the left div of a split-screen layout (left and right divs). The issue is that when the text reaches the bottom of the left div, it continues writing below the visible area.

I want to ensure that any text that overflows in the left div is instead redirected to the right div, keeping all the text in view. I do not want to use a scrollbar, meaning the overflowing text should automatically continue on the right div rather than extending beyond the screen.

The goal is to keep the animation seamless while ensuring all text remains visible. How can I achieve this behavior?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TOP SECRET</title>
    
    <!-- External Styles -->
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="about.css">

    <!-- Fonts & Internal Styles -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

        body {
            font-family: 'VT323', monospace;
            background-color: #000;
            color: #ff9500;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-size: 2rem;
            display: flex;
            flex-direction: row;
            height: 100vh;
        }
        .left, .right {
            width: 50%;
            padding: 2rem;
            box-sizing: border-box;
            overflow-y: hidden; /* Prevent vertical scrolling */
        }

        .left {
            text-align: left;
        }

        .right {
            padding-top: 6rem; /* Adjust for navbar height */
        }

        .section {
            display: none;
            padding: 4rem 2rem;
            margin-top: 5rem;
        }

        .section.active {
            display: block;
        }

        h1 {
            font-size: 2.5rem;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        input[type="text"] {
            width: 80%;
            padding: 0.8rem;
            font-size: 1.2rem;
            border: 2px solid #ff9500;
            background-color: #111;
            color: #ff9500;
            border-radius: 5px;
            outline: none;
            margin-bottom: 1rem;
            text-align: center;
        }

        input[type="text"]::placeholder {
            color: rgba(255, 140, 0, 0.6);
        }

    </style>
</head>
<body>

    <div class="left">
        <div id="intro" class="section active">
            <p id="introText" class="intro"></p>
        </div>

        <div id="debrief" class="section">
            <h1>INFO</h1>
            <div class="text"><span id="text"></span></div>
        </div>

    <div class="right">
        <div id="rightText"></div>
    </div>

    <script>
                                     document.getElementById("debrief").classList.add("active");


        function startQuoteAnimation() {
            const textElement = document.getElementById("text");
            const rightTextElement = document.getElementById("rightText");
            const textArray = [
                "We are a Classified Agency funded by the U.S. government...",
                "Our sector [Sector 6] is tasked with intercepting all interstellar transmissions...",
                "If the public knew about this, chaos would ensue...",
                "It is your mission to work with us with your time here and to make sure NO ONE knows...",
                "INFO",
                "Task 1",
                "Task 2",
                "Task 3",
                "Task 4"
            ];

            let textIndex = 0, charIndex = 0;
            let isLeft = true;

            function typeText() {
                if (textIndex < textArray.length) {
                    if (charIndex < textArray[textIndex].length) {
                        if (isLeft) {
                            textElement.innerHTML += textArray[textIndex].charAt(charIndex);
                        } else {
                            rightTextElement.innerHTML += textArray[textIndex].charAt(charIndex);
                        }
                        charIndex++;
                        setTimeout(typeText, 25);
                    } else {
                        if (isLeft) {
                            textElement.innerHTML += "<br><br>";
                        } else {
                            rightTextElement.innerHTML += "<br><br>";
                        }
                        textIndex++;
                        charIndex = 0;
                        if (textElement.scrollHeight > textElement.clientHeight) {
                            isLeft = false;
                        }
                        setTimeout(typeText, 1000);
                    }
                }
            }
            typeText();
        }
    </script>
</body>
</html>

What is visible

What stuff is there but not visible

What I want to do with what is not Visible

Solution

You can try out the below code, the changes ->

Changed textElement from span to div
Set max height to text div for indicate it's max availability
Wrapped left and right main divs by parent div and added styles to flex view

One thing you need to fix is that currently, the text moves to the right after being added. This will be a problem if the added text is larger, as it will overflow and hide the content.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TOP SECRET</title>

  <!-- External Styles -->
  <!-- <link rel="stylesheet" href="main.css"> -->
  <!-- <link rel="stylesheet" href="about.css"> -->

  <!-- Fonts & Internal Styles -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

    body {
      font-family: 'VT323', monospace;
      background-color: #000;
      color: #ff9500;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      font-size: 2rem;
      display: flex;
      flex-direction: row;
      height: 100vh;
    }

    .left,
    .right {
      width: 50%;
      padding: 2rem;
      box-sizing: border-box;
      overflow-y: hidden;
      /* Prevent vertical scrolling */
    }

    .left {
      text-align: left;
    }

    .right {
      padding-top: 6rem;
      /* Adjust for navbar height */
    }

    .section {
      display: none;
      //padding: 4rem 2rem;
      margin-top: 5rem;
    }

    .section.active {
      display: block;
    }

    h1 {
      font-size: 2.5rem;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }

    .text {
      max-height: 40vh;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="left">
      <div id="intro" class="section active">
        <p id="introText" class="intro"></p>
      </div>

      <div id="debrief" class="section">
        <h1>INFO</h1>
        <div class="text" id="left-text"></div>
      </div>
    </div>

    <div class="right">
      <div id="rightText"></div>
    </div>
  </div>

  <script>
    document.getElementById("debrief").classList.add("active");

    function startQuoteAnimation() {
      const textElement = document.getElementById("left-text");
      const rightTextElement = document.getElementById("rightText");
      const textArray = [
        "We are a Classified Agency funded by the U.S. government...",
        "Our sector [Sector 6] is tasked with intercepting all interstellar transmissions...",
        "If the public knew about this, chaos would ensue...",
        "It is your mission to work with us with your time here and to make sure NO ONE knows...",
        "INFO",
        "Task 1",
        "Task 2",
        "Task 3",
        "Task 4"
      ];

      let textIndex = 0,
        charIndex = 0;
      let isLeft = true;

      function typeText() {
        if (textIndex < textArray.length) {
          if (charIndex < textArray[textIndex].length) {
            if (isLeft) {
              textElement.innerHTML += textArray[textIndex].charAt(charIndex);
            } else {
              rightTextElement.innerHTML += textArray[textIndex].charAt(charIndex);
            }
            charIndex++;
            setTimeout(typeText, 1);
          } else {
            if (isLeft) {
              textElement.innerHTML += "<br><br>";
            } else {
              rightTextElement.innerHTML += "<br><br>";
            }
            textIndex++;
            charIndex = 0;
            if (textElement.scrollHeight > textElement.clientHeight) {
              isLeft = false;
            }
            setTimeout(typeText, 1);
          }
        }
      }
      typeText();
    }

    startQuoteAnimation();
  </script>
</body>

</html>