<div class="div">
  <input name="shirina" type="number" min="10" max="24"  id="shirina" placeholder="Ширина">
  <input name="dlina" type="number" min="5" max="7" id="dlina"  placeholder="Длина">
</div>

.div {
  display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
}
.erorr {
    border: solid 2px #e66565;
}

.erorr-m {
margin-bottom: 10px;
  padding: 10px;
  color: #e66565;
  border-left: solid 2px #e66565;
  animation: 1s fadeIn;
}

  document.getElementById("shirina").onblur = function () {
      if (shirina.value < 10) {
        error1();
      document.getElementById("shirina").value = "10";  
      } else if (shirina.value > 24) {
        document.getElementById("shirina").value = "24";  
        error1();
      }
    }
  document.getElementById("dlina").onblur = function () {
      if (dlina.value < 5) {
        error2();
      document.getElementById("dlina").value = "5";  
      } else if (dlina.value > 7) {
        document.getElementById("dlina").value = "7";  
        error2();
      }
    }
function error1() {
  let p1 = document.createElement('p');
  p1.className = "erorr-m";
  p1.innerHTML = "Значение от 10 до 24";
  shirina.after(p1);
  setTimeout(function(){
  p1.remove();
  }, 3000);
}
function error2() {
  let p2 = document.createElement('p');
  p2.className = "erorr-m";
  p2.innerHTML = "Значение от 5 до 7";
  dlina.after(p2);
  setTimeout(function(){
  p2.remove();
  }, 3000);
}