chromium/chrome/browser/resources/ash/settings/os_a11y_page/bluetooth_braille_display_ui.html

<style include="settings-shared">
  settings-dropdown-menu {
    --md-select-width: 100%;
  }

  .container {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: space-between;
    margin-inline-end: var(--cr-section-padding);
    min-height: var(--cr-section-min-height);
  }

  #pinContainer {
    align-items: baseline;
    display: flex;
    height: 32px;
  }

  #pinLabel {
    margin-inline-end: var(--cr-section-padding);
  }

  .controls {
    align-items: center;
    display: flex;
    flex: 1;
  }

  .menu {
    flex: 1;
  }

  .menu,
  .button {
    margin-inline-start: 16px;
  }

</style>

<div class="container">
  <span class="label">$i18n{chromeVoxBluetoothBrailleDisplaySelectLabel}</span>
  <template is="dom-if" if="[[inPinMode_]]">
    <div id="pinContainer">
      <div id="pinLabel" class="controls">
        $i18n{chromeVoxBluetoothBrailleDisplayPincodeLabel}
      </div>
      <cr-input
          id="pinCode"
          aria-label="$i18n{chromeVoxBluetoothBrailleDisplayPincodeLabel}"
          type="text"
          on-change="onPincodeChanged_">
      </cr-input>
    </div>
  </template>
  <template is="dom-if" if="[[!inPinMode_]]">
    <div id="controls" class="controls">
      <settings-dropdown-menu
          id="displaySelect"
          class="menu"
          label="$i18n{chromeVoxBluetoothBrailleDisplaySelectLabel}"
          pref="{{brailleDisplayAddressPref_}}"
          menu-options="[[brailleDisplayMenuOptions_]]">
      </settings-dropdown-menu>
      <cr-button id="connectOrDisconnect" class="button">
        $i18n{chromeVoxBluetoothBrailleDisplayConnect}
      </cr-button>
      <cr-button id="forget" class="button">
        $i18n{chromeVoxBluetoothBrailleDisplayForget}
      </cr-button>
    </div>
  </template>
</div>