[FIXED] How to place two Bootstrap input groups on the same line?

Issue

Desired result: "between X% and Y%", and the input groups, all on the same line.

This works with regular form fields, but not with input-group:

between
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

Solution

Use classes d-inline-flex align-items-center w-auto on input-group:

body { padding: 1em; }

input.form-control { width: 3em; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group d-inline-flex align-items-center w-auto">
  between&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
  and&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

Answered By - Anurag Srivastava

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)