<div class="p-0 flex-grow-1">
  <button type="button" class="btn btn-sm text-info" (click)="previousTime()" [disabled]="!hasPreviousTime()">
    <i class="glyphicon icon-chevron-left"></i>
  </button>
  <button class="btn btn-sm text-info" (click)="$event.preventDefault();showTimeSelect()"
    [hidden]="selectVisible">
    <span [hidden]="!currentTimeDefined()">{{currentTime}}</span>
    <span [hidden]="currentTimeDefined()" class="bg-warning text-dark">Selected time is out of range</span>
  </button>
  <select #hstimeselector [hidden]="!selectVisible"
    (change)="selectTime($event);hideTimeSelect();" (blur)="hideTimeSelect()">
    <option *ngFor="let time of availableTimes" [ngValue]="time">{{time}}</option>
  </select>
  <button type="button" class="btn btn-sm text-info" (click)="followingTime()" [disabled]="!hasFollowingTime()">
    <i class="glyphicon icon-chevron-right"></i>
  </button>
</div>
<div class="p-0">
  <button type="button" class="btn btn-sm"
    [ngClass]="{'btn-info': timesInSync, 'text-secondary': !timesInSync}"
    (click)="synchronizeTimes()" title="Synchronize time for all layers">
    <i class="glyphicon icon-timeline"></i>
    <span class="sr-only">Synchronize times</span>
  </button>
</div>

<div class="p-0 flex-grow-1">
  <button type="button" class="btn btn-sm text-info" (click)="previousTime()" [disabled]="!hasPreviousTime()">
    <i class="glyphicon icon-chevron-left"></i>
  </button>
  <button class="btn btn-sm text-info" (click)="$event.preventDefault();showTimeSelect()"
    [hidden]="selectVisible">
    <span [hidden]="!currentTimeDefined()">{{currentTime}}</span>
    <span [hidden]="currentTimeDefined()" class="bg-warning text-dark">Selected time is out of range</span>
  </button>
  <select #hstimeselector [hidden]="!selectVisible"
    (change)="selectTime($event);hideTimeSelect();" (blur)="hideTimeSelect()">
    <option *ngFor="let time of availableTimes" [ngValue]="time">{{time}}</option>
  </select>
  <button type="button" class="btn btn-sm text-info" (click)="followingTime()" [disabled]="!hasFollowingTime()">
    <i class="glyphicon icon-chevron-right"></i>
  </button>
</div>
<div class="p-0">
  <button type="button" class="btn btn-sm pr-0"
    [ngClass]="{'btn-info': timesInSync, 'text-secondary': !timesInSync}"
    (click)="synchronizeTimes()" title="Synchronize time for all layers">
    <i class="glyphicon icon-timeline"></i>
    <span class="sr-only">Synchronize times</span>
  </button>
</div>

Align time-sync button with the settings icon
Align time-sync button with the settings icon
