<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;
}

const validateRange = ({ target }) => {
  const min = +target.getAttribute('min');
  const max = +target.getAttribute('max');
  const value = +target.value;
  if (value < min || value > max) {
    target.value = Math.min(max, Math.max(min, value));
    const p = document.createElement('p');
    p.className = "erorr-m";
    p.innerText = `Значение от ${min} до ${max}`;
    target.after(p);
    setTimeout(() => p.remove(), 3000);
  }
};

document.getElementById("shirina").addEventListener('blur', validateRange);
document.getElementById("dlina").addEventListener('blur', validateRange);