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>

<p>ローンの月賦を決定するには、ローン計算機を使用してください。</p>
    <div id="container">
        <div id="igCheckboxEditorsContainer">
            <form id="form" action="javascript:console.log('送信');">
                <table>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="firstName"></div></div>
                        </td>
                        <td>
                            名前
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="lastName"></div></div>
                        </td>
                        <td>
                            名字
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="creditAmount"></div></div>
                        </td>
                        <td>
                            ローンの元本
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="currency"></div></div>
                        </td>
                   ...

CSS

#container {
            width: 100%;
            min-width: 900px;
            max-width: 900px;
            display: inline-block;
            background-image: url("http://s1.postimg.org/ip7nzwz2n/logo.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: right bottom;
        }

        #igCheckboxEditorsContainer {
            top: 0px;
            left: 0px;
            height: 500px;
            width: 450px;
            padding-top: 15px;
            float: left;
        }

        #ValuesContainer {
            top: 0px;
            right: 0px;
            height: 500px;
            width: 100%;
            padding-top: 15px;
            float: right;
            font-size: 18px;
        }

            #ValuesContainer.p {
                font-size: 16px;
            }
            @media only screen and (max-width:780px){
                #igCheckboxEditorsContainer
                {
                    float: none;
                    height: auto;
                }
                #valuesContainer{
                    margin-top: 20px;
                }
                 #container{
                     background-image:none;
                 }
            }

JavaScript

$(function () {
			var listData = ["EUR", "USD", "GBP"];

			$('#firstName').igTextEditor({
			});

			$('#lastName').igTextEditor({
				toUpper: true
			});

			$('#creditAmount').igNumericEditor({
				placeHolder: "例: 3000",
				value: 1000,
				minValue: 500,
				maxValue: 10000
			});

			$('#currency').igTextEditor({
				buttonType: "dropdown",
				listItems: listData,
				visibleItemsCount: 2,
				value: "EUR"
			});

			$('#interestRate').igPercentEditor({
				placeHolder: "利率",
				displayFactor: 1,
				value: "8.70%",
				minValue: 6.70,
				maxValue: 16
			});

			$('#startDateOfCredit').igDatePicker({
				placeHolder: "例: " + new Date().getFullYear().toString() + "/" + new Date().getMonth().toString() + "/" + new Date().getDay().toString(),
				minValue: new Date(2015, 5, 1),
				maxValue: new Date(2020, 11, 31),
				value: new Date(),
				locale: "ja",
				regional: "ja"
			});

			$('#term').igNumericEditor({
				placeHolder: '返済期間 (月)',
				value: 24,
				minValue: 6,
				maxValue: 120,
				buttonType: "spin",
				spinDelta: 6
			});

			$('#salaryInBank').igCheckboxEditor({
				checked: false,
				valueChanging: function (evt, ui) {
					if (ui.newValue === true) {
						$('#pin').show();
					}
					else {
						$('#pin').hide();
					}
				}
			});

			$('#pin').igMaskEditor({
				placeHolder: '$$(credit_pin_placeHolder)',
				inputMask: 'LL-000'
			});

			$("#resultCredit").igCurrencyEditor({
				readOnly: true,
				width: 150
			});

			$("#returnValue").igCurrencyEditor({
				readOnly: true,
				width: 150
			});

			$("#monthlyPaymentValue").igCurrencyEditor({
				readOnly: true,
				width: 150
			});

			$("#form").submit(function (event) {

				//Calculate the total amount of the credit
				var sumToGive = $('#creditAmount').igNumericEditor("option", "value");
				var loanPeriod = $('#term').igNumericEditor("option", "value");
				var salaryIsInBank = $('#salaryInBank').igCheckboxEditor("option", "checked");
				var selectedInterestRate =...