Bootstrap 5 forms horizontal validation styles

<!DOCTYPE html>
<title>My Example</title>

<div class="form-group has-warning">
<label class="col-form-label" for="password">Warning</label>
<input type="password" class="form-control form-control-warning" id="password" aria-describedby="passwordStatus">
<div class="form-control-feedback">C'mon, you can do better than that username...</div>
</div>

<div class="form-group has-danger">
<label class="col-form-label" for="phone">Danger</label>
<input type="tel" class="form-control form-control-danger" id="phone" aria-describedby="phoneStatus">
<div class="form-control-feedback">That username's so bad, we can't accept it.</div>
</div>

</div>
		

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>