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

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' " class="col-2" [ngClass]="{ 'd-none': view != 'list' }" id="statusFilter">
      <label class="font-weight-bold text-secondary" for="statusFilter">Filter By Status:</label>
      <select style="display: inline-block ;"
        name="statusFilter"
        [(ngModel)]="statusFilter"
        class="form-control"
        (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: enter image description here

cssangulartypescriptbootstrap-4


Solution 1:[1]

For the parent class, use flexbox:

display: flex;
align-items: center;

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 akshithMarolie
Solution 2 Searche

Related Questions