I have a class=row, what contains 3 cols. col-1, col-4 and col-7. col-7 is a chip-list, while col-1 is headline and col-4 is input field. I want to make the chip-list appear after 2 rows under the the col-1 nad col-4 as on the picture. Is it possible ? Here is code:
<div class="row">
<div class="col-1 container w-100 koostaja-headline fixed-height" style="display: flex; justify-content: left; align-items: center;">
<span>Koostaja<span style="color: red;">*</span></span>
</div>
<div class="col-4 container w-100 koostaja-input">
<mat-form-field class="no-bottom-padding w-100 fixed-height">
<input #koostajaInput
matInput
type="text"
name="koostajaInput"
[formControl]="koostajaControl"
[matAutocomplete]="autoKoostaja"
[matChipInputFor]="koostajaChipList"
(click)="focusKoostajaInput(koostajaInput)">
<mat-autocomplete #autoKoostaja="matAutocomplete"
(optionSelected)="selectKoostaja($event, koostamiseForm, koostajaInput)">
<mat-option [disabled]="isKoostajaSelected(profiil, koostamiseForm)"
*ngFor="let profiil of koostajaValikFiltered | async"
[value]="profiil"
class="font-size-14px">
{{profiil.eesnimi}} {{profiil.perenimi}} {{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div class="col-7 container w-100 koostaja-choosen">
<mat-chip-list #koostajaChipList>
<span *ngFor="let koostaja of koostamiseForm.get('koostajad').value">
<mat-chip *ngFor="let profiil of koostaja.profiilList"
[selectable]="false"
[removable]="true"
(removed)="removeKoostaja(profiil, koostamiseForm)"
class="font-size-14px"
matTooltip="{{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}">
{{koostaja.eesnimi}} {{koostaja.perenimi}}
<mat-icon matChipRemove *ngIf="!isDokumentJoustanud">cancel</mat-icon>
</mat-chip>
</span>
<mat-error *ngIf="koostamiseForm.get('koostajad')?.errors?.required">Koostaja on vaja lisada!</mat-error>
</mat-chip-list>
</div>
