JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Conlang: A Generator</h1>

<textarea id="dic-editor">{"a":"b","b":"c","c":"d","chicken":"nuggets"}</textarea>
<div id="translator">
    <textarea id="input">I would like some chicken abc</textarea>
    <input type="button" value="Translate" id="inputB">
    <textarea id="output" readonly></textarea>
</div>

CSS

body {
    background-color: #cccccc;
    color: #444444;
}
h1 {
    text-align: center;
    font-family:"courier";
}
#explanation {
    text-align: justify;
    font-family:"Times New Roman";
    font-size: 1em;
    text-indent: 3em;
}
code {
    font-family:"courier new";
    font-size: .8em;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #111111;
    color: #aaaaaa;
    border-radius: 2px;
}
#dic-editor {
    width: calc(100% - .86%);
    width: -moz-calc(100% - .86%);
    height: calc(100vh - 1.86em);
    height: -moz-calc(100vh - 1.86em);
    padding: .43%;
    margin: 0;
    margin-bottom: 1em;
    border: none;
    background-color: #111111;
    color: #aaaaaa;
    border-radius: 2px;
    font-size: 1em;
    outline: none;
    resize: none;
    overflow: auto;
}
#input {
    width: calc(43% - .86%);
    width: -moz-calc(43% - .86%);
    height: 40vh;
    float: left;
    padding: .43%;
    margin: 0;
    border: none;
    background-color: #111111;
    color: #aaaaaa;
    border-radius: 2px;
    font-size: 1em;
    outline: none;
    resize: none;
    overflow: auto;
}
#inputB {
    font-family:"courier";
    width: 14%;
    padding: 0;
    margin: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    border: none;
    background-color: #1f1f1f;
    color: #aaaaaa;
    border-radius: 2px;
    font-size: .8em;
    resize: none;
    cursor: pointer;
    outline: none;
}
#inputB:hover {
    background-color: #aaaaaa;
    color: #1f1f1f;
}
#output {
    width: calc(43% - .86%);
    width: -moz-calc(43% - .86%);
    height: 40vh;
    float: right;
    padding: .43%;
    margin: 0;
    border: none;
    background-color: #111111;
    color: #aaaaaa;
    border-radius: 2px;
    font-size: 1em;
    outline: none;
    resize: none;
    overflow: auto;
}

JavaScript

String.prototype.cap = function () {
  return this.charAt(0).toUpperCase() + this.slice(1);
};

function trans(value, jsonMap) {
  var mapObj = JSON.parse(jsonMap);

  var re = new RegExp(Object.keys(mapObj).sort(function(a, b) {
    return b.length - a.length;
  }).join("|"), "g");

  return value.replace(re, function (matched) {
    return mapObj[matched];
  });
}

$('#inputB').click(function () {
    var result = trans($("#input").val(), $("#dic-editor").val());
    $("#output").val(result);
});