title: How to align two ng-select components side by side in material
body: <p>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? </p>
  
  <p>This is an example of what I am trying to achieve. 
  <a href="https://ng-select.github.io/ng-select#/forms" rel="nofollow noreferrer">https://ng-select.github.io/ng-select#/forms</a>
  I tried changing the width this way: 
  .ng-select.AdditionalRecipientFormcustom ::ng-deep .ng-select-container  {<br>
    width:30%;
    }</p>
  
  <pre><code>            &lt;mat-expansion-panel [(expanded)]="xpandStatus" #formDirectiveTwo="ngForm" [formGroup]="AdditionalRecipientForm"&gt; 
                &lt;mat-expansion-panel-header   [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight" &gt;
                  &lt;mat-panel-title&gt;
                    Add Recipients To The Report
                  &lt;/mat-panel-title&gt;
                &lt;/mat-expansion-panel-header&gt;
                &lt;button mat-raised-button (click)="externalLogin()"   color="primary" &gt;Create Recipient&lt;/button&gt;
                &lt;br&gt;
                    &lt;ng-select class="AdditionalRecipientFormcustom"
                    [items]="recipients"
                    [hideSelected]="true"
                    #select
                    loadingText="Loading..."
                    [selectOnTab] = "true"
                    dropdownPosition="auto"
                    bindLabel="Email"
                    placeholder="Select Recipient"
  
                    formControlName="UserRecipientsDto"&gt;
             &lt;ng-template ng-option-tmp let-item="item" let-search="searchTerm"&gt;
                &lt;div&gt;&lt;span [ngOptionHighlight]="search"&gt;Email: {{item.Email}} &lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span [ngOptionHighlight]="search"&gt;Name: {{item.FirstAndLast }}&lt;/span&gt;&lt;/div&gt;
             &lt;/ng-template&gt;
         &lt;/ng-select&gt;
                     &lt;mat-form-field class="add-addtional-recipients-form-field"&gt;
                         &lt;mat-label&gt;Contact Name&lt;/mat-label&gt;
                       &lt;input  matInput placeholder="User Email Address"   formControlName="FirstAndLast"&gt;
                     &lt;/mat-form-field&gt;
        &lt;ng-select class="AdditionalRecipientFormcustom"
                    [items]="recipientTypes"
                    [hideSelected]="true"
                    #select
                    loadingText="Loading..."
                    [selectOnTab] = "true"
                    dropdownPosition="auto"
                    bindLabel="typerecipient"
                    placeholder="Select Type Of Recipient"
  
                    formControlName="TaskRecipientTypeDto"&gt;
             &lt;ng-template ng-option-tmp let-item="item" let-search="searchTerm"&gt;
                 &lt;div&gt;&lt;span [ngOptionHighlight]="search"&gt;{{item.typerecipient}}&lt;/span&gt;&lt;/div&gt;
             &lt;/ng-template&gt;
         &lt;/ng-select&gt;
                    &lt;br&gt;
                    &lt;button mat-raised-button class="btnUpdate"  (click)="resetFieldsForAdditionalForm()" [disabled]="!AdditionalRecipientForm.valid" color="primary"&gt;&lt;b&gt;Reset&lt;/b&gt;&lt;/button&gt;
                    &lt;button mat-raised-button class="btnReset" (click)="createNewRecipientUser(); this.getLogins(); " color="primary"&gt;&lt;b&gt;Update&lt;/b&gt;&lt;/button&gt;
                    &lt;br&gt;
              &lt;/mat-expansion-panel&gt;
  </code></pre>