JSFiddle - React, Tailwind, and code Playground

by Eugene Vilder

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<html>
<body>
<textarea rows="4" cols="50">Sample1 Text1 Line 1
Sample2 Text2 Line 2
Sample3 Text3 Line 3</textarea>
<button>Draw / Rebuild Html</button>
<hr>

<div id='result'></div>
</body>
</html>

CSS

textarea {
  display: block;
}

JavaScript

$( document ).ready(function() {

	const lineAlignments = ['left', 'right', 'center'];

	$( "button" ).on('click', function() {
  	const newTextValue = $('textarea').val();
	  rebuildTextAlignments();
    rebuildHtml(newTextValue);
	}).click();
  
  
  function rebuildHtml(value){
	  $('#result').empty();

  	value.split('\n').forEach((line, i)=>{
    	$('#result').append(`<div>${line}</div>`).find('div:last').css({
      	textAlign: lineAlignments[i]
      })
    });

	}
  
  function rebuildTextAlignments(){
  }



});