<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">Beautify 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>
                    
                

                    
<script src="https://cdn.rawgit.com/senchalabs/cssbeautify/master/cssbeautify.js"></script>
                    
                

                    
$(function() {
    var inputWidth = $('.col-sm-5').width();
    $('textarea').height(inputWidth*(3/4));
    $('.submit-btn').click(function() {
        var beaut_input = $('.input-textarea').val();
        var beaut_output = cssbeautify(beaut_input, {
            indent: '    ',
            openbrace: 'end-of-line',
            autosemicolon: true
        });
        $('.output-textarea').val(beaut_output);
    });
    $('.clear-code-btn').click(function() {
        $('.input-textarea').val('');
        $('.output-textarea').val('');
    });
});