<div class="demo-container-main">
<form action="" method="POST" id="demoForm">
<div class="col-12 demo-container-input">
<div class="input-group">
<input type="text" name="demoInput" class="form-control" id="demoInput" placeholder="This is a test form">
<div class="input-group-text"><i class="fa-solid fa-circle-question"></i></div>
</div>
<div class="demo-container-message"></div>
</div>
<div class="col-12 demo-container-submit">
<input name="submit" id="submitButton" type="submit" value="Submit" class="btn btn-primary float-end">
</div>
</form>
</div>

.demo-container-main {
  margin: 0 auto;
  max-width: 600px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(to top, #ffffff 0%, #dfe9f3 100%);
  border-radius: 6px; 
  padding: 2rem;
}

.demo-container-input {
  margin-bottom: 1em;
}

.demo-container-submit {
  padding-bottom: 1em;
}

.demo-container-message {
  height: 40px;
  padding-bottom: 1em;
}

.demo-message {
  background: rgba(255, 0, 0, 0.10);
  color: rgba(255, 0, 0, 0.90);
  letter-spacing: 1px;
  padding: 4px 10px;
  display: inline-block;
  border-radius: 4px;
  margin-top: 10px;
}

.demo-input-warning {
  background-color: rgba(255 ,0, 0, 0.1);
}

<script>
$(function() {

$('#submitButton').click(function() {
if ($('#demoInput').val().length < 4) {
$('input#demoInput').attr("placeholder", "Please enter at least four characters ⚠ ");
$("#demoInput").addClass("demo-input-warning");
return false;

} else {
$('input#demoInput').attr("placeholder", "");
$("#demoInput").removeClass("demo-input-warning");
return true;
}

});
});
</script>