JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <fieldset class="left">
        <input class="in" type="text">
        <input class="in" type="text">
        <input class="in" type="text">
    </fieldset>
    <fieldset class="right">
        <input class="out" type="text">
        <input class="out" type="text">
        <input class="out" type="text">
    </fieldset>
    <input type="submit" id="submit" value="Submit">
</div>

CSS

#container {
    width:400px; 
    position:relative;
}
fieldset {
    width:200px;    
}
input {
    padding:4px 7px;
    margin:2px 0px;
}
#submit {
    width:100px;
    margin:20px 0;
}
span {
    font:36px Cambria, Georgia, serif;
    font-weight:bold;
    display:none;
    padding:20px 0;
}
.left {
    float:left;   
}
.right {
    float:right;  
}

JavaScript

$(document).ready(function() {  
    
    $('#submit').click(function() {
        var numIn = 0;
        var numOut = 0;
        var total = 0;
        
        $('input.in').each(function() {
            if($(this).val().length !== 0){
                return numIn = numIn + parseInt(this.value);
            });
        });
        $('input.out').map(function() {
            if($(this).val().length !== 0){
                return numOut = numOut + parseInt(this.value);
            });
        });
        
        total = numIn-numOut;
    
        $('span').remove();
        $('body').append('<span>&#163;'+total+'</span>');
        $('span').fadeIn(250);
        return false;
    });
});