JSFiddle - React, Tailwind, and code Playground

HTML

<p id="p1">
        text text text text text text text text text text text,
        text text text text text text text text text text text,
        text text text text text text text text text text text,
        text text text text text text text text text text text.
    </p>
    <div id="holder"></div>

JavaScript

var text_to_copy = document.getElementById('p1').innerHTML;
        var holder = document.getElementById("holder");
        var input = document.createElement("textarea");

        document.getElementById('p1').onclick = function(){
            input.id = "textarea_id";
            input.style.display = "block";
            input.style.padding = "0px";
            input.style.margin = "0px";
            //input.style.textAlign = "left"; does not do anything
            input.style.width = "562px";

            input.value = text_to_copy.replace(/\s{1,}/g, ' ');
            alert(input.value);//just to see if onclick works

            holder.appendChild(input);

        }