<main>
  <label for="start-date">Start Date:&nbsp;<input type="date" id="start-date" name="start-date" required></label>
  <br/><br/>
  <label for="end-date">End Date:&nbsp;<input type="date" id="end-date" name="end-date" required></label>
</main>

body {
  display: grid;
  height: 100vh;
  place-items: center;
  background: #424B52;
}

label {
  font-weight: bold;
  font-family: sans-serif;
  color: white;
}

const startDate = document.getElementById('start-date');
const endDate = document.getElementById('end-date');

function validateDateRange() {
  if (startDate.value <= endDate.value) {
    endDate.setCustomValidity('');
  } else {
    endDate.setCustomValidity('End date must be greater than start date.');
  }
  this.reportValidity();
}

startDate.addEventListener('change', validateDateRange);
startDate.addEventListener('blur', validateDateRange);

endDate.addEventListener('change', validateDateRange);
endDate.addEventListener('blur', validateDateRange);