To structure your form inputs, consider utilizing Bootstrap's grid layout. You can nest your inputs within a col inside a row, without altering the individual input fields themselves. Simply apply an additional CSS class to both input-group divs and wrap them in a container div with the class row:
<div className="App">
<div className="row">
<div className="input-group col-6">
<input ... />
{showAppend === true && (
<div className="input-group-append">
<span className="input-group-text" id="basic-addon2">
@example.com
</span>
</div>
)}
</div>
<div className="input-group col-6">
<input... />
{showAppendPassword === true && (
<div className="input-group-append">
<span className="input-group-text" id="basic-addon2">
@example.com
</span>
</div>
)}
</div>
</div>
</div>
This approach leverages the grid system to display both the username and password inputs side by side effectively. By specifying the width of each input-group div with col-6 (indicating they occupy 50% of the total width), you ensure that when the input-group-append is present, it does not disrupt the layout of the adjacent input:
Original input layout:
https://i.sstatic.net/8tsvk.png
Updated with input-group-append:
https://i.sstatic.net/7tdd0.png