I have a component where I have a selectbox and a button in a row. In desktop mode they work perfectly fine, but when I resize the screen the design breaks off. What I want is that they stay next to each other in a row even if you resize the screen, but I can not get it work. Could someone look at my code which works at desktop mode and tell me where my error is?

<div class="row" style="padding-bottom: 10px; padding-left: 40px;">
                     <form [formGroup]="form">
                            <item formControlName="type" type="select" placeholder="please select"
                            [selectValues]="options" 
                            [labelText]="title">
                        </item>  
                        </form>
                        <div class="col-2 ">  
                            <input hidden type="file" #input (change)="selectFile()">  
                        <button class="upload" (click)="input.click()" mat-raised-button
                        type="submit">{{text}}
                    </button>
                </div>
            </div>