JSFiddle - React, Tailwind, and code Playground

HTML

Length <input id="length" />&nbsp;
Width <input id="width" /><br/>
<div id="output"></div>

JavaScript

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width'),
    max1 = 100,
    min1 = 20,
    max2 = 400,
    min2 = 10;

 max1box.addEventListener('change',validateValues,false);
 max2box.addEventListener('change',validateValues,false);


function validateValues() {
    
    if (this == max1box &&
        this.value > max1 &&
        this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  
       
       document.getElementById("output").innerHTML =
           "Max1Box is " + max1box.id + ", Max2Box is " + max2box.id;
    }
    
    if (max1box .value > max1) {
        max1box .value = max1;
    }
    if (max1box .value < min1) {
        max1box .value = min1;
    }        
    
    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
    }
   }