JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p class="h3">Podaj tekst do podzielenia: </p>
            <form>
                <textarea id="input" placeholder="Wpisz tekst..." class="form-control" rows="10"></textarea>
                <button class="btn-lg btn">Konwertuj</button>
            </form>
        </div>
        <div class="col-md-6">
            <div>
                <p class="h2">Rezultat: </p>
                <div class="jumbotron">
                    <p id="result"></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#result {
    height: 100px;
}
textarea {
    resize: none;
}
.btn {
    float: right;
    margin-top: -50px;
    margin-right: 5px;
}

JavaScript

/**
 * Created by mati on 2015-02-02.
 */
var list = [' ', ','];
var start = function () {
    $('.btn').on('click', function (e) {
        e.preventDefault();
        var text = $('#input').val();
        var result = '';
            for (var i = 0; i < list.length; i++) {
                var arg = new RegExp(list[i], 'g');
                text = split(text, arg);
            }
        $('#result').text(text);
    });
};
var split = function (text, arg) {
    'use strict';
        return text.replace(arg, '\n [new line]');
};
$(document).ready(start());