I'm having trouble creating an inline form with a text and select input. Despite using Bootstrap 5, I can't seem to achieve the desired appearance.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f819f83">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class=r ow>
<div class="col-lg-12">
<div class=r ow>
<div class="col-md-2">
<label for="the_select" class="form-label">Key Name</label>
</div>
<div class="col-md-2">
<select class="form-select" id="the_select">
<option selected>Open this select menu</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-2">
<label for="value_field_id" class="form-label">Variable Name</label>
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="value_field_id">
</div>
</div>
</div>
</div>This code contains my current HTML layout with Bootstrap 5. However, I'm facing an issue where the label is far too distant from the corresponding input/select and is not vertically centered with it. Is there a simple solution to correct this? I've attempted adjusting the display property in the label's style, but it doesn't seem to have any effect.