JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="form-section">
     <li class="form-line" >
        <label for="WG_Collected">WG Collected</label>
        <div>
          <input type="number" id="WG_Collected" name="WG_Collected" value="15.0" min="0" step="0.1" required>
        </div>
    </li>
    <li class="form-line" >
        <label for="Proof">Proof</label>
        <div>
          <input type="number" id="Proof" name="Proof" Value="79.4" min="0" step="0.1" required>
        </div>
    </li>
    <li class="form-line" >
        <label for="PG_Collected">PG Collected</label>
        <div>
          <textarea type="number" id="PG_Collected" name="PG_Collected"></textarea>
        </div>
    <input type="button" value="Calculate PG" id="submitButton" />
    </li>

   </ul>

CSS

.form-section {
    list-style:none;
}
.form-line {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}

JavaScript

function myCalc() {
    var num1 = document.getElementById('WG_Collected').value;
    var num2 = document.getElementById('Proof').value;
    var PG_Collected = parseFloat(num1) * parseFloat(num2)/100;
    document.getElementById('PG_Collected').innerHTML = PG_Collected.toFixed(2);
}

document.getElementById("WG_Collected").addEventListener("change", myCalc, true);
document.getElementById("Proof").addEventListener("change", myCalc, true);