[MD settings] layout sub-headers in display settings

This CL is a follow-up to CL 2273083002 where the <h2> sub-labels were
updated to the current mocks. The displays sub-page (chromeos only) also
needed to be updated.

BUG=638461
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2283933002
Cr-Commit-Position: refs/heads/master@{#414855}

chrome/browser/resources/settings/device_page/display.html

@@ -13,13 +13,6 @@
 <dom-module id="settings-display">
   <template>
     <style include="settings-shared">
-     .display-section {
-       align-self: flex-start;
-       font-size: 100%;
-       font-weight: 500;
-       margin: 10px 0;
-     }
-
      .settings-box.embedded {
        align-self: stretch;
        margin-left: 20px;
@@ -47,14 +40,14 @@
      }
     </style>
     <div class="settings-box first layout vertical self-stretch">
-      <div class="display-section">$i18n{displayArrangement}</div>
+      <h2>$i18n{displayArrangement}</h2>
       <display-layout id="displayLayout"
           selected-display="[[selectedDisplay]]"
           on-select-display="onSelectDisplay_">
       </display-layout>
     </div>
-    <div class="settings-box layout vertical">
-      <div class="display-section">[[selectedDisplay.name]]</div>
+    <div class="settings-box layout vertical first">
+      <h2>[[selectedDisplay.name]]</h2>
       <div class="settings-box embedded first">
         <paper-checkbox class="flex" checked="[[isMirrored_(displays)]]"
             hidden$="[[!showMirror_(displays)]]" on-tap="onMirroredTap_">

chrome/browser/resources/settings/settings_shared_css.html

@@ -8,6 +8,7 @@
       /* Use <h2> as the "sub-header" mentioned in the UX design docs. */
       h2 {
         align-items: center;
+        align-self: flex-start;
         color: var(--paper-grey-600);
         display: flex;
         font-size: inherit;