Looking at the image, it's clear that there's an issue with my Bootstrap 5 form layout. One of the labels has multiple lines of text and causing it to be misaligned with the other elements in the grid.
The problematic HTML code is as follows:
<!-- Include Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101746f736f71">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e03474d41405d6e1f0017001f">[email protected]</a>/font/bootstrap-icons.css">
<div class="row">
<div class="col-6 offset-3">
<form action="/" method="POST" novalidate class="row g-3 validated-form">
<div class="col-12 mb-3">
<label for="address-line-1" class="form-label">Address Line 1</label>
<input type="text" id="address-line-1" class="form-control" name="addressLine1" autocomplete="address-line1" required>
</div>
<div class="col-12 mb-3">
<label for="address-line-2" class="form-label">Address Line 2</label>
<input type="text" id="address-line-2" class="form-control" name="addressLine2" autocomplete="address-line2">
</div>
<div class="col-md-6 mb-3">
<label for="city" class="form-label">City</label>
<input type="text" id="city" class="form-control" name="city" autocomplete="address-level2" required>
</div>
<div class="col-md-4 mb-3">
<label for="region" class="form-label">Province/State</label>
<input type="text" id="region" class="form-control" name="region" autocomplete="address-level1" required>
</div>
<div class="col-md-2 mb-3">
<label for="postcode" class="form-label">Postal Code/ZIP</label>
<input type="text" id="postcode" class="form-control" name="postcode" autocomplete="postal-code" required>
</div>
<button class="btn btn-primary">Create</button>
</form>
</div>
</div>I'm struggling to align these items properly. I've attempted using "d-flex align-items-end" but they end up stacking on top of each other and losing the default form styling. Any suggestions on how to make the alignment more sensible would be greatly appreciated.