Как выровнять по левому краю циклический анимационный текст пишущей машинки в центральном блоке, используя HTML, CSS, JS?

Question

Я использовал пример codepen от Aakhya Singh (https://codepen.io/daviddcarr/pen/XVyQMM), для создания зацикленного текста на пишущей машинке. Этот пример использовался в качестве основы, и я изменил его в соответствии со своими спецификациями:

HTML

<div class="container py-5">
  <div class="output text-center" id="output">
    <h2 class="cursor", style="font-weight:bold; text-align:center;"></h2>
    <hr>
  </div>
</div>

CSS

.output {
  text-align:left;
  color:black;
}

/* Cursor Styling */
.cursor::before {
  content:'>';
}

.cursor::after {
  content:'';
  display:inline-block;
  margin-left:3px;
  background-color:#05AC72;
  animation-name:blink;
  animation-duration:0.5s;
  animation-iteration-count: infinite;
}
h2.cursor::after {
  height:28px;
  width:7px;
}
p.cursor::after {
  height:13px;
  width:6px;
}

@keyframes blink {
  0% {
    opacity:1;
  }
  49% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

JS

// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
    a = 0,
    isBackspacing = false,
    isParagraph = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = ["text to appear in typewriter"];

// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
    speedWait = 1000, // Wait between typing and backspacing
    speedBetweenLines = 1000, //Wait between first and second lines
    speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("output", textArray);

function typeWriter(id, ar) {
  var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h2"), //Header element
      eParagraph = element.children("p"); //Subheader element

  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {

    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {

      // If character about to be typed is a pipe, switch to second line and continue.
      if (aString.charAt(i) == "|") {
        isParagraph = true;
        eHeader.removeClass("cursor");
        eParagraph.addClass("cursor");
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedBetweenLines);

      // If character isn't a pipe, continue typing.
      } else {
        // Type header or subheader depending on whether pipe has been detected
        if (!isParagraph) {
          eHeader.text(eHeader.text() + aString.charAt(i));
        } else {
          eParagraph.text(eParagraph.text() + aString.charAt(i));
        }
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedForward);
      }

    // If full string has been typed, switch to backspace mode.
    } else if (i == aString.length) {

      isBackspacing = true;
      setTimeout(function(){ typeWriter(id, ar); }, speedWait);

    }

  // If backspacing is enabled
  } else {

    // If either the header or the paragraph still has text, continue backspacing
    if (eHeader.text().length > 0 || eParagraph.text().length > 0) {

      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eParagraph.text().length > 0) {
        eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
      } else if (eHeader.text().length > 0) {
        eParagraph.removeClass("cursor");
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);

    // If neither head or paragraph still has text, switch to next quote in array and start typing.
    } else { 

      isBackspacing = false;
      i = 0;
      isParagraph = false;
      a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
      setTimeout(function(){ typeWriter(id, ar); }, 50);

    }
  }
}

Сейчас анимация начинается так:

С курсором в центре.

Эффект пишущей машинки будет печатать весь текст, и текст перецентрируется в зависимости от количества отображаемых символов:

окончательный текст будет выглядеть так:

Возможно ли центрирование текста на пишущей машинкена экране выровнять по левому краю, чтобы текст отображался в той же позиции? Сейчас текст перемещается, чтобы перецентрироваться при добавлении / удалении дополнительных символов. Таким образом, я бы хотел, чтобы курсор отображался слева.выравнивается по центру страницы, как это в начале:

, и следующий текст появится с этой точки и продолжит цикл:

Я попытался поэкспериментировать с style="text-align:center;" и style="text-align:left;" и изменение margin но мне не удалось.Я использовал margin, чтобы немного ввести текст, однако результат выглядел по-разному в зависимости от используемого браузера и разрешения экрана.

Я также попытался прочитать сообщение здесь:

CSS: центральный блок, но выравнивание содержимого по левому краю

, однако я не смог решить эту проблему.