chromium/chrome/browser/resources/side_panel/commerce/price_tracking_section.html

<style include="cr-hidden-style">
  #toggleSection {
    align-items: center;
    display: flex;
    max-width: 100%;
  }

  #toggleTitle {
    color: var(--cr-primary-text-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  #toggleAnnotationButton {
    color: var(--cr-link-color);
  }

  #toggleAnnotation {
    color: var(--cr-secondary-text-color);
    display: inline;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    white-space: initial;
  }

  #toggleText {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    line-height: 20px;
    margin-right: 10px;
    margin-top: -1px;
    max-width: 100%;
  }

  #toggle {
    margin-inline-end: 0px;
    margin-inline-start: auto;
  }
</style>

<div id="toggleSection">
  <div id="toggleText">
    <div id="toggleTitle">$i18n{trackPriceTitle}</div>
    <!-- This is a special handling to make sure that the annotation text,
    folder name and period will be in the same line. -->
    <div id="toggleAnnotation">
      [[toggleAnnotationText_]]
      <span hidden="[[!showSaveLocationText_]]">
        [[saveLocationStartText_]]<a href="#"
            id="toggleAnnotationButton"
            on-click="onFolderClicked_"
            >[[folderName_]]</a>[[saveLocationEndText_]]
      </span>
    </div>
  </div>
  <cr-toggle id="toggle" checked="{{isProductTracked}}"
      on-change="onPriceTrackingToggled_" title="$i18n{trackPriceTitle}"
      aria-describedby="toggleAnnotation">
  </cr-toggle>
</div>