JSFiddle - React, Tailwind, and code Playground

by winns

HTML

<div id="wrapper">
    
    <div id="box_left">
        text 1
        <textarea id="txt1"></textarea>
    </div>
    
    <div id="box_right">
        text 2
        <textarea id="txt2"></textarea>
    </div>
    
    <div id="box_control">
        <a href="#" id="ok">OK</a>
    </div>
    
    <div id="box_main">
        result
        <textarea id="txt3"></textarea>
    </div>
    
</div>

CSS

* {margin : 0; padding: 0;}
body{background: #343434; color: #fff;}
#wrapper {position: relative; margin: 0 auto;}
#box_left, #box_right{
    position: relative;
    float: left;
    padding: 4px 4%;
    width: 42%;
}

#box_main{
    position: relative;
    float: left;
    padding: 4px 4%;
    width: 92%;
}

#box_control{
    position: relative;
    float: left;
    margin: 4%; padding: 4px 4%;
    width: 84%;
    border: 1px solid #777;
    text-align: center;
}

#txt1, #txt2, #txt3{
    width: 100%; height: 100px;
    resize: none;
}

a{color: orange; text-decoration: none;}
a:hover{color: white; text-decoration: none;}

JavaScript

$("#ok").click(function() {
    arr1 = $('#txt1').val().split('\n');
    arr2 = $('#txt2').val().split('\n');
    
    for (key in arr1) {
        $('#txt3').append(arr1[key]+'\n');
    }
    
    //$('#txt3').append(arr1);
});