JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <div align="center">
        <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4><br>
        <br>
        <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10">
</textarea><br>
        <br>
        <button id="Go">Divide Text into Paragraphs!</button>
    </div>
    <hr>
    <h2 align="center">Divided Text Will Appear Below:</h2>
    <div>
        <div align="center" id="text_land" style="font-family: monospace">
        </div>
    </div>

CSS

@media print {
    p {
        page-break-inside: avoid;
    }
}

p {
    position: relative;
}

@media print {
    .no-print,.no-print * {
        display: none !important;
    }
}

p {
    border-style: solid;
}

p {
    color: #000;
}

p {
    display: block;
    text-align: justify;
    border-width: 5px;
    font-size: 19px;
}

p {
    overflow: hidden;
    height: 300px;
    width: 460px;
    word-wrap: break-word;
}

JavaScript

$(function() {
    $("#Go").on('click', function() {
    var $p,a=[];
        var theText = $('textarea').val();
        var numberOfCharacters = 300;
        while (theText.length) {
            while (theText.length > numberOfCharacters &&
                theText.charAt(numberOfCharacters) !== ' ') {
                numberOfCharacters++;
            }
            
            $p=$("<p contenteditable class='text'>" + theText.substring(0, numberOfCharacters) +"<\/p>")
            .on('keydown',function(e){
            	var p=this;
            	setTimeout(function(){
            		if(e.which===13){
                	var i;
              		var k=$(p).html().split('<br>');
                  if((i=a.indexOf(p))>-1&&a[i+1])
                  	$(a[i+1]).html(k.pop()+' '+$(a[i+1]).html());
                  
                  $(p).html(k.join('<br>'));
              	}
              });
            });
            
            a.push($p.get(0));
            
            $("#text_land").append("<br><\/br>",$p,"<br><\/br>");
            
            theText = theText.substring(numberOfCharacters);
            numberOfCharacters = 300;
        }
    })
})
$('select').on('change', function() {
    var targets = $('#text_land p'),
        property = this.dataset.property;
    targets.css(property, this.value);
}).prop('selectedIndex', 0);
//(end);