chrome/browser/resources/print_preview/ui/advanced_settings_item.html

<style include="print-preview-shared md-select search-highlight-style
    cr-hidden-style">
  :host {
    display: flex;
    min-height: 54px;
    position: relative;
  }

  :host > * {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .label,
  .value {
    align-self: center;
    color: var(--cr-primary-text-color);
    overflow: hidden;
  }

  .label {
    flex: 1;
    min-width: 96px;
    opacity: 0.87;
  }

  .value {
    flex: 0;
    min-width: 239px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .value > * {
    display: flex;
    margin-inline-start: 10px;
  }

  cr-input {
    width: 239px;
    --cr-input-error-display: none;
  }

  select.md-select {
    font-size: 1em;
  }
</style>
<label class="label searchable">[[getDisplayName_(capability)]]</label>
<div class="value">
  <template is="dom-if" if="[[isCapabilityTypeSelect_(capability)]]"
      restamp>
    <div>
      <select class="md-select" on-change="onUserInput_">
        <template is="dom-repeat" items="[[capability.select_cap.option]]">
          <option class="searchable" text="[[getDisplayName_(item)]]"
              value="[[item.value]]"
              selected="[[isOptionSelected_(item, currentValue_)]]">
          </option>
        </template>
      </select>
    </div>
  </template>
  <span hidden$="[[!isCapabilityTypeInput_(capability)]]">
    <cr-input type="text" on-input="onUserInput_" spellcheck="false"
        placeholder="[[getCapabilityPlaceholder_(capability)]]">
    </cr-input>
  </span>
  <span hidden$="[[!isCapabilityTypeCheckbox_(capability)]]">
    <cr-checkbox on-change="onCheckboxInput_"
        checked="[[isChecked_(currentValue_)]]">
    </cr-checkbox>
  </span>
</div>