how Fix this two elements layout with css to be on same line?-CodePudding

I have the following code in Angular html page which i need to make the label sit next to the dropdown list

<div *ngIf="this.userRole == 'myrequests' "  [ngClass]="{ 'd-none': view != 'list' }" id="statusFilter">
      <label  for="statusFilter">Filter By Status:</label>
      <select style="display: inline-block ;"
        name="statusFilter"
        [(ngModel)]="statusFilter"
        
        (change)="setStatusFilter()">
        <option  [value]="'none'" disabled selected><strong> Choose Filter: </strong></option> 
        <option   *ngFor="let status of statuses" [value]="status.name">
            {{ status.name }}
        </option>
    </select>
</div>

typescript file has the array:

  statuses = [
    { id: 0, name: "All" },
    { id: 1, name: "Approved" },
    { id: 2, name: "Created" },
    { id: 3, name: "Rejected" },
    { id: 4, name: "Cancelled" },
    { id: 5, name: "Approval Pending" },
  ];

The desired layout I want to be on the same line

the current situation as shown in this image:

CodePudding user response：

For the parent class, use flexbox:

display: flex;
align-items: center;

CodePudding user response：

You could give the label a display: inline-block; aswell.

Or you could put the label and both in a different div and give those div's a certain width.