I am currently utilizing Bootstrap 4 and I am attempting to align a button with an input that has two labels - one above and one below it.
It seems to work when I place the button outside the form tag, but unfortunately, I need to keep it within for the Javascript code to function properly.
I have experimented with the form-inline class, which worked fine when there was only one label above the input. However, when adding another label below the input, the alignment between the button and the input gets disrupted.
If you try to make the bottom label visible by typing a letter in the input field and pressing enter, you will notice that the button becomes misaligned.
My goal is to consistently maintain the alignment of the button to the right of the input.
Here is my CodePen link: CodePen Link
Below are the HTML codes:
<article>
<div class="container">
<div class="row searchSection">
<form id="searchForm" class="form-inline input-group input-group-lg">
<div class="col-lg-10 form-group align-self-start">
<label class="postcode">Zip Code</label>
<input type="text" name="text" autocomplete="off">
</div>
<div class="col-lg-2 form-group align-self-end">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
</article>