<button>Add more line</button>

<div class="box">
    <p>Double Line</p>
    <p>Double Line</p>
</div>
body {
  color: @beige;
  background: @green;
  display: table;
  width: 100%;
  height: 100%;
}

.box {
  display:table-cell;
  vertical-align: middle;
  text-align: center;
}

/*====== Ignore section below ======*/

@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;


/* Basic Style*/
* { margin:0; padding:0;}
html, body { height: 100%; }
button { padding: 5px 10px;position:absolute;bottom: 20px;left:20px;display: block; -webkit-appearance: none;background: @orange; outline: none;  border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;}
button:active {border-color: @beige; color:@beige;}
View Compiled
document.querySelector("button").addEventListener("click", function(){
    var element = document.createElement("p");
    element.innerText = "Additional Line";
  document.querySelector(".box").appendChild(element);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.