[MD settings] OnStartup settings layout closer to mocks

chrome/browser/resources/settings/settings_shared.css

Index: chrome/browser/resources/settings/settings_shared.css
diff --git a/chrome/browser/resources/settings/settings_shared.css b/chrome/browser/resources/settings/settings_shared.css
index 182bc6253dbdfdd2c4ce6c0ba3a44d160ed69650..85883ab05fe9ff75d7e09ba5e7cf8d5f0fc0746d 100644
--- a/chrome/browser/resources/settings/settings_shared.css
+++ b/chrome/browser/resources/settings/settings_shared.css
@@ -16,6 +16,12 @@ paper-button[toggles][active] {
   background-color: LightGray;
 }
 
+.text-elide {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 h2 {
   color: #9e9e9e;
   font-size: 100%;
@@ -43,7 +49,7 @@ h2 {
 .list-item {
   @apply(--layout-center);
   border-top: 1px solid #e0e0e0;
-  display: block;
+  display: flex;
   padding: 0;
 }
 
@@ -51,6 +57,20 @@ h2 {
   border-top: none;
 }
 
+.list-item .middle {
+  flex: 1;
+  margin-bottom: 8px;
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 8px;

[dpapad, 2016/01/12 00:43:47]

Nit: You can use shortened syntax for the 4 margin values as follows.
margin: 8px 12px;

[dschuyler, 2016/01/12 19:49:37]

Done.

+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.list-item .secondary {
+  color: #969696;
+}
+
 .list-item > paper-icon-item {
   padding: 0;
 }