title: ng-select component has a gap between input box and items
body: <p>I have app that uses the <a href="https://github.com/ng-select/ng-select" rel="nofollow noreferrer">@ng-select</a> library. I am also using a component that expands when called upon. If I expand the drop down everything works, but if I have some items in my other component my drop down has a gap that corresponds to the height of the other component. I am using css grid to align the 2 horizontally as seen below. <a href="https://stackblitz.com/edit/angular-f2gccn" rel="nofollow noreferrer">Here</a> is a stackblitz. Click "New Query" in the drop down then "Rule" to add rules. Any ideas?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="quick-filters form-inline"&gt;
    &lt;ng-select style="width: 100%;" appearance="outline" [searchable]="false" [(ngModel)]="filterType" groupBy="group"
      (change)="onFilterTypeSelect($event)" [items]="filterTypes" bindLabel="name"&gt;
    &lt;/ng-select&gt;
    &lt;div *ngIf="showQuickQuery" class="input-add-on"&gt;
      &lt;query-builder class="input-add-on-field" [formControl]='queryCtrl' [config]='queryConfig' [allowRuleset]="false"&gt;
        &lt;ng-container
          *queryButtonGroup="let ruleset=addRuleSet; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet"&gt;
          &lt;div class="btn-toolbar"&gt;
            &lt;button type="button" class="btn btn-default" [disabled]="ruleset.rules == 0" (click)="onSaveFilter()"&gt;&lt;i
                class="fa fa-floppy-o" style="color: #00BFFF;"&gt;&lt;/i&gt; Save&lt;/button&gt;
            &lt;button type="button" class="btn btn-default" (click)="addRule()"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Rule&lt;/button&gt;
            &lt;button type="button" class="btn btn-default" [disabled]="ruleset.rules == 0" (click)="onValueSelect()"&gt;&lt;i
                class="fa fa-play" style="color: #32CD32;"&gt;&lt;/i&gt; Apply&lt;/button&gt;
          &lt;/div&gt;
        &lt;/ng-container&gt;
        &lt;ng-container *queryInput="let rule; type: 'date-range'"&gt;
          &lt;input type="text" class="form-control" [(ngModel)]="rule.value" placement="bottom right" bsDaterangepicker
            [bsConfig]="bsConfig" /&gt;
        &lt;/ng-container&gt;
      &lt;/query-builder&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>  .quick-filters {
      display: grid;
      grid-template-columns: 0.25fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: 
      ". .";
      grid-gap: 2px;
    }
    .input-add-on {
      display: flex;
    }
  
    .input-add-on-field {
      flex: 1;
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/OeIyi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OeIyi.jpg" alt="Gap"></a></p>