My label is not aligning with my select box. Instead, it is sitting below the previous div, which is in the middle of the page.

The select box sits to the far left. The for and name values match, so I don't understand why they are separated.

I am using style="display:inline;" on the previous div and style="display:inline-block;vertical-align:top" on the div following.

Even if I replace label with span it still sits under the previous div in the centre of the page. Any ideas?

This is the whole problem div.

  <div class="form-group">
  <div class="dropdown" dropdown>
  <label class="label-text" for="unit" >Cm/Inch</label>
  <select class="form-control" id="unit" style="width:150px;" 
(ngModelChange)="onUnitChange($event)"
          [(ngModel)]="job_entry.units" name="unit">
    <option disabled hidden [value]="undefined">select unit </option>
    <option  value="cm">centimeters</option>
    <option  value="inch">inches</option>
  </select>
</div>