<div class="row">

  <div class="col-sm-4  col-6">
    <div class="form-group">
      <label for="zips-{{uuid}}" class="label">Zip Code:</label>
      <rbj-drop-down [name]="name+'Zip'" [ngModel]="zip" editable [source]="this.zipCodeList"
        [maskExpression]="'00000-9999'" [id]="id+'Zip'" [inputClass]="'text-left '+inputClass"
        (selectedChange)="zipCodeChanged($event);zipcodeToCounty(zip);onBlur()" [readonly]="readonly"
        [disabled]="isDisabled" [required]="required" [mustMatch]="false">
      </rbj-drop-down>
      <!-- <input type="text" nbInput fullWidth name="zips-{{uuid}}" [(ngModel)]="zip" (change)="zipCodeChanged()"> (blur)="zipCodeChanged($event);onBlur()" -->
    </div>
  </div>
  <div class="col-sm-5 col-12">
    <div class="form-group">
      <label for="citys-{{uuid}}" class="label">City</label>
      <input type="text" class="{{inputClass}}" nbInput fullWidth [name]="name+'City'" [(ngModel)]="city"
        [id]="id+'City'" autocomplete="off" [readonly]="readonly" (blur)="cityOrStateChanged();onBlur()"
        [disabled]="isDisabled" [required]="required" [inputLimitation]="37">
    </div>
  </div>
  <div class="col-sm-3 col-6">
    <div class="form-group">
      <label for="states-{{uuid}}" class="label">State</label>
      <input type="text" class="{{inputClass}}" nbInput fullWidth [name]="name+'State'" [(ngModel)]="state"
        [id]="id+'State'" autocomplete="off" [mask]="'UU'" validate [invalidMsg]="'Invalid state code format'" ffMsg
        [readonly]="readonly" (blur)="cityOrStateChanged();onBlur()" [disabled]="isDisabled" [required]="required"
        disableForceFocus>
    </div>
  </div>
</div>