<div class="row">
    <textarea placeholder="INPUT" class="input-textarea col-sm-5"></textarea>
    <div class="col-sm-2 text-center py-4 mt-md-5">
        <div class="btn-group-vertical" role="group">
            <button class="btn btn-outline-primary submit-btn" type="submit">Minify CSS</button>
            <button class="btn btn-outline-primary clear-code-btn" type="submit">Clear All</button>
        </div>
    </div>
    <textarea placeholder="OUTPUT" class="output-textarea col-sm-5"></textarea>
</div>
                    
                

                    
$(function() {
    var inputWidth = $('.col-sm-5').width();
    $('textarea').height(inputWidth*(3/4));
    $('.submit-btn').click(function() {
        var input = $('.input-textarea').val();
        var output = input
            .replace(/\/\*.*\*\/|\/\*[\s\S]*?\*\/|\n|\t|\v|\s{2,}/g, '')
            .replace(/\s*\{\s*/g, '{')
            .replace(/\s*\}\s*/g, '}')
            .replace(/\s*\:\s*/g, ':')
            .replace(/\s*\;\s*/g, ';')
            .replace(/\s*\,\s*/g, ',')
            .replace(/\s*\~\s*/g, '~')
            .replace(/\s*\>\s*/g, '>')
            .replace(/\s*\+\s*/g, '+')
            .replace(/\s*\!\s*/g, ' !')
            .replace(/\s*\;\}\s*/g, '}');
        $('.output-textarea').val(output);
    });
    $('.clear-code-btn').click(function() {
        $('.input-textarea').val('');
        $('.output-textarea').val('');
    });
});