JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="payment" class="clearfix">
        <div id="salary">
            <h2>売上総利益</h2>
            <p id="gross">￥738990.00</p>
            <h2>当期純利益</h2>
            <p id="nett">￥773022.95</p>
        </div>
        <div id="deduction">
            <label for="federalTax">国税</label>
            <input id="federalTax"></input>
            <label for="stateTax">地方税</label>
            <input id="stateTax"></input>
            <label for="socialSecurity">国民年金</label>
            <input id="socialSecurity"></input>
            <label for="medicare">医療保険</label>
            <input id="medicare"></input>
        </div>
    </div>

CSS

#payment {
            width: 50%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 20px;
        }

        #salary {
            float: left;
        }

        #salary > p {
            margin-bottom: 20px;
        }
        
        .sample-page h2 {
            margin-top: 0;
        }

        #deduction {
            float: right;
        }

        #deduction label {
            display: block;
        }
        
        .ui-igedit-container {
            margin-bottom: 15px;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        @media screen and (max-width:785px) {
            #payment {
                width: 60%;
            }
        }

        @media screen and (max-width:685px) {
            #payment {
                width: 100%;
            }
        }

        @media screen and (max-width:420px) {
            #salary, #deduction {
                float: none;
            }
        }

JavaScript

$(function () {
        var listValues = [600, 900, 1500, 1680, 1980, 2100];

        function nettChange() {

            var gross = 6000.00, nett;
            var federalTax = $("#federalTax").igCurrencyEditor("value");
            var stateTax = $("#stateTax").igCurrencyEditor("value");
            var socialSecurity = $("#socialSecurity").igCurrencyEditor("value");
            var medicare = $("#medicare").igCurrencyEditor("value");

            nett = gross - federalTax - stateTax - socialSecurity - medicare;

            return parseFloat(nett.toFixed(2));

        }


        $("#federalTax").igCurrencyEditor({
            listItems: listValues,
            value: 600,
            valueChanged: function (evt, ui) {
                var newNettIncome = nettChange().toLocaleString();
                $("#nett").text("￥" + newNettIncome);
            }
        });
        $("#stateTax").igCurrencyEditor({
            buttonType: "spin",
            spinDelta: 0.01,
            value: -300.00,
            maxDecimals:2,
            minValue: -331.80,
            maxValue: 331.80,
            valueChanged: function (evt, ui) {
                var newNettIncome = nettChange().toLocaleString();
                $("#nett").text("￥" + newNettIncome);
            }
        });
        $("#socialSecurity").igCurrencyEditor({
            value: -700,
            minValue: -744,
            maxValue: 744,
            valueChanged: function (evt, ui) {
                var newNettIncome = nettChange().toLocaleString();
                $("#nett").text("￥" + newNettIncome);
            }
        });
        $("#medicare").igCurrencyEditor({
            value: 174,
            positivePattern: "$(n)",
            valueChanged: function (evt, ui) {
                var newNettIncome = nettChange().toLocaleString();
                $("#nett").text("￥" + newNettIncome);
            }
        });

    });