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

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.