Display 2 input fields within ng-container and div side by side in bootstrap

Question

I'm trying to display 2 input fields and a button side by side. Tried many combinations, but still no luck. The code block of the and is below. Can you please help on how to make them on the same row ide by side. Thanks so much

Code:

<div [id]="id" class="row" style="margin: 0rem; align-items: center">
...
   <ng-container [formGroup]="igf">
   ...
     <div class="p-0">
     ...
        <div class="input-group input-group-sm">
        ...
           <ng-container>
           ...
              <input> --first
              <div class="input-group">
              ...
                <input> --second

              </div>
           </ng-container>
        </div>
     </div>
   </ng-container>
</div>

Answer 1

Option 1: No nested input-group

app.component.html

<div [id]="id" class="row" style="margin: 0rem; align-items: center;">
  <div class="p-0">
    <div class="input-group input-group-sm d-flex">
      <input />
      <input />
      <button type="submit">Submit</button>
    </div>
  </div>
</div>

See live demo.

Option 2: Nested input-group

If you want to have a nested input-group, then the following code will do the trick. Add style="display: inline-flex;" to the second input-group.

The code below also works within <ng-container>. See live demo.

app.component.html

<div [id]="id" class="row" style="margin: 0rem; align-items: center;">
  <div class="p-0">
    <div class="input-group input-group-sm">
      <input />
      <div class="input-group" style="display: inline-flex;">
        <input />
      </div>
      <button type="submit">Submit</button>
    </div>
  </div>
</div>

See live demo.