JSFiddle - React, Tailwind, and code Playground

HTML

<div class="search-container">
<div class="scrollable">
    <mat-chip-list>
        <mat-chip *ngFor="let $searchTerm of ($searchTerms | async)" [removable]="$searchTerm.removable" (removed)="removeSearchTerm(searchTerm)"  [matTooltip]="searchTerm">
            <mat-icon matSuffix>{{$searchTerm.icon}}</mat-icon>
            {{$searchTerm.value}} 
            <mat-icon matChipRemove *ngIf="$searchTerm.removable">cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>
</div>
    <div class="search">
        <mat-form-field floatLabel="never" class="remove-underline trim-whitespace">
            <span matPrefix><mat-icon matSuffix>search</mat-icon></span>
            <input matInput (keyup)="onSearchTerm($event)" placeholder="Search"  [(ngModel)]="searchInput">
        </mat-form-field>
        <button mat-button (click)="submitSearchTerm()">Submit</button>
    </div>
</div>

CSS

.scrollable {
    width: 200px;
    overflow: auto;
    white-space: nowrap;
}

mat-chip{
  display: inline-block;
}