JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	<div class="resultPlaceholder"></div>

        <script>
            var readableString = 'xxx';
            var nonceValue = 'lol';
            var encryptedString = 'eyJjaXBoZXJ0ZXh0IjoiYnAzTFlMNkZ6M1huNnpEdTF3Sm50dz09IiwiaXYiOiJjNzQ5ODliYjNmNTljYTcxM2U2NWJjNGJjNGYzMjcyYyIsInNhbHQiOiJhMzZmM2YxNWQzM2JmNTJiMzk4YTRiMjE5YWJiMzMwNjllMDA1ZThiYzAyYzQ1ZDQyZDUzMjFmZmQ0M2EwNzg3NTI4Y2ViNjQ5MjE4YTYzNDQyNmIzMWI1M2NhNjgzN2UzNjQ4Zjg0MTYwMzE0ZGJmYzJiYTEwNWI1NzNkNjBhN2JjNTFlZTFiOTRiZWU1YjQ1MjNhMTVkYjVmOTU5OTkwYWY4ZTAxOGI2NmU2NTkwMjM2Y2YwYWViOWJmNTI0NjgyZjUyMDNlYTNhMWYwZTY5NTIyNWVkZGEzZWIyNWU5NDNkZDM0YTAwY2FhZjkwZGU2ZWVmM2UxYTNmNDU4Nzg2NjRhZjc1MWJjNmE1MjMzZDcwM2Q2ZTQ5NTU5OWIzYjRiYzNiZjg2NzljNDEyY2UyOTIwMWUyODJjNTQ3MjBhYjViZmZjNGIwNWRlNWZkNzMzMjBiNTAzZmE2NmRiNjNjYTg0ZGRiNzk0MGMwYTAxNGFlZmYyYzA2YTYxOWRlODViODhjNDA5M2MzMTZiNzZkNDM5NmUxZmI2MWViOTZkODkzYjAzYzk1MzhlNjdjZGQ4ZmQ1YmJlZjQyMGFmOTg5OTg4N2VlZWFhN2JlMjAxMGI0MTI5ZDQwYzUzYWU2MWRhOWQ2MGUyNzYyOGYyZjhkYTRjMDMwMGZkMDk2ZTViNyIsIml0ZXJhdGlvbnMiOjk5OX0=';
            // on page loaded.
            jQuery(document).ready(function($) {
                let encryption = new Encryption();
                var encrypted = encryption.encrypt(readableString, nonceValue);
                console.log(encrypted);
                var decrypted = encryption.decrypt(encrypted, nonceValue);
                console.log(decrypted);
                var decryptedOldString = encryption.decrypt(encryptedString, nonceValue);
                console.log(decryptedOldString);
        	
                $('.resultPlaceholder').html('readable string: '+readableString+'<br>');
                $('.resultPlaceholder').append('encrypted: '+encrypted+'<br>');
               ...

JavaScript

/**
 * Encryption class for encrypt/decrypt that works between programming languages.
 * 
 * @author Vee Winch.
 * @link https://stackoverflow.com/questions/41222162/encrypt-in-php-openssl-and-decrypt-in-javascript-cryptojs Reference.
 * @link https://github.com/brix/crypto-js/releases crypto-js.js can be download from here.
 */
class Encryption {


    /**
     * @var integer Return encrypt method or Cipher method number. (128, 192, 256)
     */
    get encryptMethodLength() {
        var encryptMethod = this.encryptMethod;
        // get only number from string.
        // @link https://stackoverflow.com/a/10003709/128761 Reference.
        var aesNumber = encryptMethod.match(/\d+/)[0];
        return parseInt(aesNumber);
    }// encryptMethodLength


    /**
     * @var integer Return cipher method divide by 8. example: AES number 256 will be 256/8 = 32.
     */
    get encryptKeySize() {
        var aesNumber = this.encryptMethodLength;
        return parseInt(aesNumber / 8);
    }// encryptKeySize


    /**
     * @link http://php.net/manual/en/function.openssl-get-cipher-methods.php Refer to available methods in PHP if we are working between JS & PHP encryption.
     * @var string Cipher method. 
     *              Recommended AES-128-CBC, AES-192-CBC, AES-256-CBC 
     *              due to there is no `openssl_cipher_iv_length()` function in JavaScript 
     *              and all of these methods are known as 16 in iv_length.
     */
    get encryptMethod() {
        return 'AES-256-CBC';
    }// encryptMethod


    /**
     * Decrypt string.
     * 
     * @link https://stackoverflow.com/questions/41222162/encrypt-in-php-openssl-and-decrypt-in-javascript-cryptojs Reference.
     * @link https://stackoverflow.com/questions/25492179/decode-a-base64-string-using-cryptojs Crypto JS base64 encode/decode reference.
     * @param string encryptedString The encrypted string to be decrypt.
     * @param string key The key.
     * @return string Return decrypted...