chrome/browser/resources/settings/languages_page/add_languages_dialog.html

    <style include="settings-shared">
      #dialog-title {
        align-items: center;
        display: flex;
      }

      #dialog-body {
        display: flex;
        flex-direction: column;
        height: 350px;
        overflow: auto;
        padding-inline-end: 0;
      }

      #dialog-title > span,
      iron-list {
        flex: 1;
      }

      .ripple-padding {
        /* Create a little extra space for checkbox ink ripple to flow into. */
        padding-inline-start: 20px;
      }

      cr-checkbox::part(label-container) {
        white-space: nowrap;
      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div id="dialog-title" slot="title">
        <span>$i18n{addLanguagesDialogTitle}</span>
        <cr-search-field label="$i18n{searchLanguages}" id="search"
            clear-label="$i18n{clearSearch}"
            on-search-changed="onSearchChanged_"
            on-keydown="onKeydown_" autofocus>
        </cr-search-field>
      </div>
      <div id="dialog-body" slot="body" scrollable>
        <iron-list class="ripple-padding" scroll-target="[[$$('[slot=body]')]]"
            items="[[getLanguages_(filterValue_)]]">
          <template>
            <cr-checkbox class="list-item no-outline"
                checked="[[willAdd_(item.code)]]" tab-index="[[tabIndex]]"
                title$="[[item.nativeDisplayName]]"
                on-change="onLanguageCheckboxChange_">
              [[getDisplayText_(item)]]
            </cr-checkbox>
          </template>
        </iron-list>
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCancelButtonTap_">
          $i18n{cancel}
        </cr-button>
        <cr-button class="action-button" on-click="onActionButtonTap_"
            disabled="[[disableActionButton_]]">
          $i18n{add}
        </cr-button>
      </div>
    </cr-dialog>