Simply v3b

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simplificadora</title>
    <style>
        body {
            font-size: 1em;
        }
        .col {
            display: inline-block;
            vertical-align: middle; }

        #equal {
            font-size: 1.8em;
        }

        input {
            border: 2px solid #cccccc;
            border-radius: 0.1em;
            display: block;
            font-size: 2.5em;
            height: 92px;
            resize: none;
            text-align: center;
            width: 92px; }

        #less, #lesses {
            border: none;
            visibility: hidden;
            font-size: 2.5em;
            width: 32px; }

        .up {
            border-bottom: 1px solid #000; }

        .down{
            border-top: 1px solid #000; }


    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="container">
        <div class="col">
            <input type="number" pattern="\d*" class="up" name="num" id="num" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 45">
            <input type="number" pattern="\d*" class="down" name="den" id="den" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 45">
        </div>

        <div class="col">
            <input type="text" class="up" id="lesses" readonly="true" value="&ndash;">
        </div>

        <div class="col">
            <button id="equal" name="equal">=</button>
        </div>

        <div class="col">
            <input type="text" class="up" id="less" readonly="true" value="&ndash;">
        </div>

        <div class="col">
            <input type="text" class="up res" id="rnum" readonly="true">
            <input type="text" class="down res" id="rden" readonly="true">
        </div>
    </div>

    <script>
        $( "document" ).ready(function() {

            $( "button" ).click( function() {
            //re-setting default css properties
            $( "#rnum" ).css({ "border-bottom" : "1px solid #000" });
            $( "#rden" ).css({ "border" : "2px solid #cccccc", "border-top": "1px solid #000"});
            $( "#less" ).css({ "visibility" : "hidden" });
            $( ".res").css("width","92px");

            var An, Ad;

            var n = $( "#num" ).val();
            var d = $( "#den" ).val();

            if ( d == 0 ) {
                $( "#rnum" ).val( "\xA1NO ES UN" );
                $( "#rden" ).val( "N\xDAMERO!" );
                $( ".res").css("width","215px");

            return;
            }

            if ( n % d == 0 ) {
                $( "#rden" ).css( {"border" : "none"});
                $( "#rnum" ).css({ "border-bottom" : "1px solid #e0e0e0" });
                $( "#rnum" ).val( n / d );
                $( "#rden" ).val("");
            return;
            }

            var hcf = 1;  //highest common factor
            var nisneg = false;  //if numerator (n) is negative
            var disneg = false;  //if denominator (d) is negative

            if ( n < 0 ) {
                nisneg = true;
            }

            if ( d < 0 ) {
                disneg = true;
            }

            An = Math.abs( n )
            Ad = Math.abs( d )

            for ( var i = 2; i <= Math.min( An, Ad ); i++ ) {
                if ( An % i == 0 ) {
                    if ( Ad % i == 0 ) {
                        hcf = i;
                    }
                }
            }

            Ad = Ad / hcf;

            if ( nisneg != disneg ) {
                $( "#less" ).css({ "visibility" : "visible" });
            }

            An = An / hcf;

            $( "#rnum" ).val( An );
            $( "#rden" ).val( Ad );

            });
        });
    </script>

</body>
</html>