[MD settings] OnStartup settings layout closer to mocks

chrome/browser/resources/settings/settings_shared.css

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /**
  * @fileoverview
  * Common styles for Material Design settings.
  */
 
 paper-button {
   margin: 0;
   min-width: auto;
 }
 
 paper-button[toggles][active] {
   background-color: LightGray;
 }
 
+.text-elide {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 h2 {
   color: #9e9e9e;
   font-size: 100%;
   font-weight: normal;
   margin-bottom: 20px;
   margin-top: 30px;
 }
 
 .button-row {
   display: flex;
   margin-top: 25px;
 }
 
 .button-strip {
   text-align: end;
 }
 
 .list-frame {
   @apply(--layout-center);
   display: block;
   margin-left: 48px;
   padding: 0;
 }
 
 .list-item {
   @apply(--layout-center);
   border-top: 1px solid #e0e0e0;
-  display: block;
+  display: flex;
   padding: 0;
 }
 
 .list-item:first-of-type {
   border-top: none;
 }
 
+.list-item .middle {
+  flex: 1;
+  margin: 8px 12px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.list-item .secondary {
+  color: #969696;
+}
+
 .list-item > paper-icon-item {
   padding: 0;
 }
 
 .link-button {
   color: rgb(61, 130, 243);
   padding-bottom: 6px;
   padding-left: 0;
   padding-right: 0;
   padding-top: 6px;
@@ skipping 17 matching lines @@
 }
 
 .split .start {
   flex: auto;
 }
 
 .settings-box paper-item iron-icon {
   /* Same padding as paper-icon-button. */
   padding: 8px;
 }