JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <h1 class="title">Cambodian Change Calculator</h1>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <fieldset id="price">
          <legend>Price</legend>
          <div class="dollars-cents">
              <span class="dollars">
                  <label>Dollars</label>
                  <input type="number" value="0" />
              </span>
              <span class="cents">
                  <label>
                      Cents
                  </label>
                  <input type="number" value="0" />
              </span>
          </div>
          <div class="dollars-riels">
              <span class="dollars">
                  <label>Dollars</label>
                  <input type="number" value="0" />
              </span>
              <span class="riels">
                  <label>Riels</label>
                  <input type="number" value="0" />
              </span>
          </div>
          <div class="riels-only">
              <span class="riels">
                  <label>Riels</label>
                  <input type="number" value="0" />
              </span>
          </div>
      </fieldset>

      <fieldset id="paid">
          <legend>Paid</legend>
          <div class="dollars-cents">
              <span class="dollars">
                  <label>Dollars</label>
                  <input type="number" value="0" />
              </span>
              <span class="cents">
                  <label>Cents</label>
                  <input type="number" value="0" />
              </span>
          </div>
          <div class="dollars-riels">
              <span class="dollars">
                  <label>Dollars</label>
                  <input type="number" value="0" />
              </span>
              <span class="riels">
                  <label>Riels</label>
                  <input type="number" value="0" />
              </span>
          </div>
          <div class="riels-only">
      ...

CSS

html {
           display: table;
           margin: auto;
       }
       body {
          font-family: verdana;
          display: table-cell;
          vertical-align: middle;
       }
       input[type=number] {
          font-size: 1.1em;
       }
       fieldset {
          line-height: 32px;
          margin-bottom: 12px;
          border: 1px solid gray;
          border-radius: 10px;
       }
       fieldset legend{
          color: navy;
          font-weight: bold;
	  font-size: 1.2em;
       }
       fieldset label {
          display: inline-block;
          width: 70px;
       }
       h1.title {
          color: navy;
          text-align: center;
          font-variant: small-caps;
       }

JavaScript

$( "input" ).change(function(eo) {
          var inp = $(this);
          var val = inp[0].value;

          var field = inp.parent();
          var fieldName = field[0].className;

          var mode = field.parent();
          var modeName = mode[0].className;

          var row = mode.parent();
          var rowName = row[0].id;

          doStuff(rowName, modeName, fieldName);
      });

      function doStuff(row, mode, field) {
        // update the other modes in the same row
        var inRiels = -1;

        switch (mode) {
          case 'dollars-cents':
            var rm = $('#' + row + ' .' + mode);
            var f = rm.find('.dollars, .cents').map(function(i, e) {
              return parseInt($(e).find('input')[0].value);
            }).toArray();

            inRiels = (f[0] * 100 + f[1]) * 40;

            updateModes(row, mode, inRiels);
            break;

          case 'dollars-riels':
            var rm = $('#' + row + ' .' + mode);
            var f = rm.find('.dollars, .riels').map(function(i, e) {
              return parseInt($(e).find('input')[0].value);
            }).toArray();

            inRiels = f[0] * 4000 + f[1];

            updateModes(row, mode, inRiels);
            break;

          case 'riels-only':
            var rm = $('#' + row + ' .' + mode);
            var f = rm.find('.riels').map(function(i, e) {
              return parseInt($(e).find('input')[0].value);
            }).toArray();

            inRiels = f[0];

            updateModes(row, mode, inRiels);
            break;

          default:
            // BANG!
        }

        switch (row) {
          case 'price':
            var rm = $('#paid .riels-only');
            var p = rm.find('.riels input')[0].value;

            updateModes('change', '', p - inRiels);
            break;

          case 'paid':
            var rm = $('#price .riels-only');
            var p = rm.find('.riels input')[0].value;

            updateModes('change', '', inRiels -...