JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ib">
    <div class="ib_input_holder">
        <p class="ib_p">encode</p>
        <input type="text" name="encode" id="encode" value=""/>
        <div id="encode_run"><p>run</p></div>
    </div>
    <div class="ib_input_holder">
        <p class="ib_p">decode</p>
        <input type="text" name="decode" id="decode" value=""/>
        <div id="decode_run"><p>run</p></div>
    </div>
    <p class="ib_p">result :</p>
    <p id="result"></p>
</div>

CSS

body {
 background:url('http://vikupavto24.ru/modules/mod_yapointer/tmpl/fancybox_overlay.png');
}
#ib {
padding: 20px 40px 35px 40px;
min-height: 415px;
width: 380px;
background: #FAFAFA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
top: 90px;
margin: 0 auto;
}
input {
    -moz-box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.4);
    -webkit-box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.4);
    box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.4);
    border: 0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
    border-bottom: 1px solid #E7E7E7;
    resize: none;
    outline: none;
    height:25px;
    text-indent: 10px;
    width:100%;
}
.ib_p {
    font-size: 15px;
    color: #555454;
    text-transform: uppercase;
    font-family: arial;
}
.ib_input_holder {
    position:relative;
}
#encode_run,#decode_run {
    background: #00A3CC;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #FFF;
    font-size: 16px;
    line-height: 22px;
    padding: 0 12px;
    display: inline-block;
    text-decoration: none;
    -webkit-transition: background 0.5s ease-in;
    -moz-transition: background 0.5s ease-in;
    -o-transition: background 0.5s ease-in;
    -ms-transition: background 0.5s ease-in;
    cursor: pointer;
    transition: background 0.5s ease-in;
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-family: arial;
    text-transform: uppercase;
cursor: pointer;
}
#encode_run p,#decode_run p {
    margin:0px;
    padding:0px;
}

JavaScript

$("#encode_run").click(function () {
    var encode_val = $("#encode").val().toLowerCase();
    encode_val = encode(encode_val);
    $("#result").text(encode_val);
});
$("#decode_run").click(function () {
    var encode_val = $("#decode").val().toLowerCase();
    encode_val = decode(encode_val);
    $("#result").text(encode_val);
});

function encode(str) {
    var first  = "abcdefghijklmnopqrstuvwxyz ";
    var second = "ydfkprzabgcnjewixlqhvuotsm ";

    return str.split('').map(function(item, i) { 
       var pos = first.indexOf(item);   
       return second[pos];
    }).join('')
}
function decode(str) {
    var first  = "ydfkprzabgcnjewixlqhvuotsm ";
    var second = "abcdefghijklmnopqrstuvwxyz ";

    return str.split('').map(function(item, i) { 
       var pos = first.indexOf(item);   
       return second[pos];
    }).join('')
}