How would I start text at the bottom of the div?

Question

So I'm working on a project about terminal based "progression", and I wanted to make the effect that terminals present in Linux/MacOS, etc. Right now, the text sticks at the top and gets replaced when the Enter key is pressed. Is there a way to create a new line at the bottom and move the older lines upward? Thanks!

Here is a link to the CodePen Project I am using currently. https://codepen.io/ZacV/pen/abEYpLz '''

function onKeyPressed(e) {
    var keyCode = e.keyCode;
    var key = e.key;
    var currentText;
    if (keyCode == 13){
      currentText = document.getElementById("Input").value;
      textfield.push(currentText);
      $("#Input").val("");
      // document.getElementById("Output").innerHTML = textfield;
      document.getElementById("Output").innerHTML = "Did not understand field: " + textfield[textfield.length-1];
    };
}

'''

Answer 1

you can use bottom property to align h3 at the bottom of the terminal div

then use

$("#Output").append(currentText + '<br/>');

to append new text entered by user to output

don't forget to use overflow: hidden;on terminalBody and h3 to hide line that overflow the output size

feather.replace();

document.addEventListener("keydown", onKeyPressed);

var textfield = [];

function onKeyPressed(e) {
  var keyCode = e.keyCode;
  var key = e.key;
  var currentText;
  if (keyCode == 13) {
    currentText = document.getElementById("Input").value;
    textfield.push(currentText);
    $("#Input").val("");
    $("#Output").append(currentText + '<br/>');
  };
}

:root {
  /*colors */
  --grey: rgb(50, 50, 50);
  --secondgrey: rgb(40, 40, 40);
  --green: rgb(30, 180, 30);
}

body {
  background-color: var(--grey);
  font-family: 'Courier New', monospace;
}

.stats {
  position: absolute;
  background-color: var(--secondgrey);
  top: 10px;
  width: 150px;
  height: 180px;
  outline-color: var(--green);
  outline-width: 3px;
  outline-style: solid;
}

.stats .statsLabel {
  position: relative;
  left: 10px;
  top: -10px;
  color: grey;
}

.stats .statsMoney {
  position: absolute;
  left: 10px;
  top: 20px;
  color: var(--green);
}

.stats .statsStatus {
  position: absolute;
  left: 10px;
  top: 40px;
  color: purple;
}

.stats .statsRole {
  position: absolute;
  left: 10px;
  top: 60px;
  color: red;
}

.stats .statsLevel {
  position: absolute;
  left: 10px;
  top: 80px;
  color: blue;
}

.stats .statsControl {
  position: absolute;
  left: 10px;
  top: 100px;
  color: Orange;
}


/* Stats Display */

.stats .DispLabel {
  position: relative;
  right: 10px;
  top: -10px;
  color: grey;
}

.stats .DispMoney {
  position: absolute;
  right: 10px;
  top: 20px;
  color: var(--green);
}

.stats .DispStatus {
  position: absolute;
  right: 10px;
  top: 40px;
  color: purple;
}

.stats .DispRole {
  position: absolute;
  right: 10px;
  top: 60px;
  color: red;
}

.stats .DispLevel {
  position: absolute;
  right: 10px;
  top: 80px;
  color: blue;
}

.stats .DispControl {
  position: absolute;
  right: 10px;
  top: 100px;
  color: Orange;
}

.stats .DispLink {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: grey;
  font-size: 15px;
}

.terminalBody {
  position: absolute;
  width: auto;
  left: 170px;
  right: 10px;
  height: auto;
  top: 10px;
  bottom: 10px;
  background-color: var(--secondgrey);
  outline-color: var(--green);
  outline-width: 3px;
  outline-style: solid;
  overflow: hidden;
}

.terminalBody .terminalInput {
  position: absolute;
  left: 60px;
  width: calc(100% - 67.5px);
  height: 40px;
  bottom: 0px;
  top: auto;
  outline-color: var(--green);
  outline-width: 3px;
  outline-style: solid;
  background-color: var(--grey);
  color: var(--green);
  font-size: 17px;
}

.terminalBody svg {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 10px;
  bottom: 6px;
  top: auto;
  color: var(--green);
}

.terminalBody h3 {
  position: absolute;
  color: var(--green);
  left: 60px;
  height: auto;
  bottom: 40px;
  font-size: 17px;
  font-size: 17px;
  line-height: 29px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.js" integrity="sha512-0hV9FhQc44B5NIfBhQFNBTXrrasLwG6SVxbRiaO7g6962sZV/As4btFdLxXn+brwH7feEg3+AoyQxZQaArEjVw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- among us -->
<div class="stats">
  <h3 class="statsLabel">Stats:</h3>
  <h3 class="statsMoney">Money</h3>
  <h3 class="statsStatus">Status</h3>
  <h3 class="statsRole">Role</h3>
  <h3 class="statsLevel">Level</h3>
  <h3 class="statsControl">Control</h3>

  <h3 class="DispMoney">0</h3>
  <h3 class="DispStatus">N/A</h3>
  <h3 class="DispRole">N/A</h3>
  <h3 class="DispLevel">0</h3>
  <h3 class="DispControl">0</h3>
  <a href="https://codepen.io/ZacV" class="DispLink">Made by Zacc</a>
</div>
<div class="terminalBody">
  <input type="text" class="terminalInput" id="Input">
  <i data-feather="chevron-right"></i>
  <h3 class="Output" id="Output"></h3>
</div>