How to align two ng-select components side by side in material

Question

select in an mat-expansion-panel. I am trying to get both of my ng-selects side by side, but even when I change the width. I can't seem to get them side by side. I went to some of documention and in one of the demos. They seem to use two ng-selects side by side. However, I think they are using boostrap to get that done. Does ngselect use boostrap as default or how can I get this down in material?

This is an example of what I am trying to achieve. https://ng-select.github.io/ng-select#/forms I tried changing the width this way: .ng-select.AdditionalRecipientFormcustom ::ng-deep .ng-select-container {
width:30%; }

            <mat-expansion-panel [(expanded)]="xpandStatus" #formDirectiveTwo="ngForm" [formGroup]="AdditionalRecipientForm"> 
              <mat-expansion-panel-header   [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight" >
                <mat-panel-title>
                  Add Recipients To The Report
                </mat-panel-title>
              </mat-expansion-panel-header>
              <button mat-raised-button (click)="externalLogin()"   color="primary" >Create Recipient</button>
              <br>
                  <ng-select class="AdditionalRecipientFormcustom"
                  [items]="recipients"
                  [hideSelected]="true"
                  #select
                  loadingText="Loading..."
                  [selectOnTab] = "true"
                  dropdownPosition="auto"
                  bindLabel="Email"
                  placeholder="Select Recipient"

                  formControlName="UserRecipientsDto">
           <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span [ngOptionHighlight]="search">Email: {{item.Email}} </span><span>, </span><span [ngOptionHighlight]="search">Name: {{item.FirstAndLast }}</span></div>
           </ng-template>
       </ng-select>
                   <mat-form-field class="add-addtional-recipients-form-field">
                       <mat-label>Contact Name</mat-label>
                     <input  matInput placeholder="User Email Address"   formControlName="FirstAndLast">
                   </mat-form-field>
      <ng-select class="AdditionalRecipientFormcustom"
                  [items]="recipientTypes"
                  [hideSelected]="true"
                  #select
                  loadingText="Loading..."
                  [selectOnTab] = "true"
                  dropdownPosition="auto"
                  bindLabel="typerecipient"
                  placeholder="Select Type Of Recipient"

                  formControlName="TaskRecipientTypeDto">
           <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
               <div><span [ngOptionHighlight]="search">{{item.typerecipient}}</span></div>
           </ng-template>
       </ng-select>
                  <br>
                  <button mat-raised-button class="btnUpdate"  (click)="resetFieldsForAdditionalForm()" [disabled]="!AdditionalRecipientForm.valid" color="primary"><b>Reset</b></button>
                  <button mat-raised-button class="btnReset" (click)="createNewRecipientUser(); this.getLogins(); " color="primary"><b>Update</b></button>
                  <br>
            </mat-expansion-panel>

Answer 1

The problem is not specific to ng-select or material. I think you are not fully understanding the display property in css. The ng-select components end up on different lines because of the default display: block; styling. You can either give the ng-selects and the mat-form-field display: inline-block; or solve it with flexbox:

// apply this class to the parent element of the form controls (ng-select, ...)
.example-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

// give ng-select a fixed width, because it isn't limited by the viewport width now
ng-select {
  width: 200px;
}

For more detailed information on flexbox, see this link. Also, see a stackblitz example of what I've explained so far.