chrome/browser/resources/settings/autofill_page/address_edit_dialog.html

    <style include="cr-shared-style settings-shared md-select">
      :host {
        white-space: nowrap;
      }

      .address-row {
        display: flex;
      }

      .address-column {
        margin-inline-end: 16px;
        width: calc((var(--settings-input-max-width) - 16px) / 2);
      }

      #select-row {
        display: block;
        /* Fix issue with focus animation making labels wiggle. */
        transform: translate3d(0, 0, 0);
      }

      .md-select {
        --md-select-width: var(--settings-input-max-width);
      }

      .long {
        width: var(--settings-input-max-width);
      }

      cr-input {
        --cr-input-error-display: none;
      }

      cr-input:not(.last-row),
      settings-textarea,
      .md-select {
        margin-bottom: var(--cr-form-field-bottom-spacing);
      }

      #dialog::part(body-container) {
        max-height: 450px;
      }

      @media all and (max-height: 714px) {
        #dialog::part(body-container) {
          max-height: 270px;
        }
      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div slot="title">[[title_]]</div>
      <div slot="body">
        <template is="dom-repeat" items="[[addressWrapper_]]">
          <div class="address-row">
            <template is="dom-repeat" items="[[item]]">
              <template is="dom-if" if="[[item.isTextArea]]">
                <settings-textarea label="[[item.component.fieldName]]"
                    value="{{item.value}}" on-value-changed="updateCanSave_"
                    class$="address-column [[long_(item)]]" autofocus
                    spellcheck="false" maxlength="1000">
                </settings-textarea>
              </template>
              <template is="dom-if" if="[[!item.isTextArea]]">
                <cr-input type="text" label="[[item.component.fieldName]]"
                    autofocus value="{{item.value}}" spellcheck="false"
                    on-value-changed="updateCanSave_" maxlength="1000"
                    class$="address-column [[long_(item)]]">
                </cr-input>
              </template>
            </template>
          </div>
        </template>
        <div id="select-row" class="address-row">
          <label id="select-label" class="cr-form-field-label">
            $i18n{addressCountry}
          </label>
          <select class="md-select" aria-labelledby="select-label"
              value="[[countryCode_]]" on-change="onCountryChange_">
            <option value=""></option>
            <template is="dom-repeat" items="[[countries_]]">
              <option value="[[getCode_(item)]]"
                  disabled="[[isDivision_(item)]]">
                [[getName_(item)]]
              </option>
            </template>
          </select>
        </div>
        <div class="address-row">
          <cr-input id="phoneInput" type="text" label="$i18n{addressPhone}"
              class="address-column last-row" on-value-changed="updateCanSave_"
              value="{{phoneNumber_}}" spellcheck="false" maxlength="1000">
          </cr-input>
          <cr-input id="emailInput" type="text" label="$i18n{addressEmail}"
              on-value-changed="updateCanSave_" value="{{email_}}"
              class="address-column long last-row" spellcheck="false"
              maxlength="1000">
          </cr-input>
        </div>
      </div>
      <div slot="button-container">
        <cr-button id="cancelButton" class="cancel-button"
            on-click="onCancelTap_">
          $i18n{cancel}
        </cr-button>
        <cr-button id="saveButton" class="action-button"
            disabled="[[!canSave_]]" on-click="onSaveButtonTap_">
          $i18n{save}
        </cr-button>
      </div>
    </cr-dialog>