Here is the code I wrote for the form:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
<form>
<div class="form-group col-lg-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<input type="checkbox" id="in-kit">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</form>
</div>
This form uses bootstrap, with a heading in a "bg-primary" background. There are two text input fields, a checkbox, and a button. The goal is to align the paragraph headings with these form elements.
You can view an image of the form here: https://i.sstatic.net/3pETm.jpg
The aim is to center-align the Items text with the first text field, Quantity with the second text field, and In kit with the checkbox.
In an attempt to achieve this, span tags were added around the text. However, adjusting margins didn't provide desired results. Using multiple non-breaking spaces also fell short of solving the alignment issue.
If you have any alternative solutions or suggestions for improving the alignment, please let me know.
Thank you.