var log = document.getElementById("div-1");
var output = document.getElementById("div-2");
console.log(log);
function addTo(where) {
  let msg = document.createElement("code");
  let lb = document.createElement("br");
  msg.textContent = "n This is text.";
  where.insertBefore(lb, where.firstChild);
  where.insertBefore(msg, where.firstChild);
}

addOne.onclick = function () {
  addTo(log);
}
addTwo.onclick = function () {
  addTo(output);
}
reset.onclick = function () {
  log.innerHTML="";
  output.innerHTML="";
}

.output-div {
          display:inline-block;
          background-color: rgb(5, 20, 20);
          border: 2px solid black;
          padding-top:20px;
          overflow: auto;
          color: white;
      }
body {
  background-color: black;
}
#div-1 {
  width:71vw;
  height: 40vh;
  top:17px;
  background-color:gray;
  top:17px;
}
#div-2 {
  width:20vw;
  height: 40vh;
  top:17px;
  background-color:blue;
}

code {
  display:block;
}

<button id="addOne">Add text to div one.</button>
<button id="addTwo">Add text to div two.</button>
<button id="reset">Reset the divs.</button>
<br>
<div id="div-1" class="output-div"></div>
<div id="div-2" class="output-div"></div>