Diagnostics: Update diagnostics card

This is temporary styling pending final mocks.

- Adjusts spacing of data points and card items
- Adjusts card-wrapper to allow for variable card height
- Adds column layout styles

Screenshots:
- Diagnostics App (before) http://shortn/_PIhlqmECzl
- Diagnostics App (after) http://shortn/_4xlkZL1oIV

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I1030cfde04eddea705f2056692a6ce98e7b8cb46
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2442633
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814021}

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -2,35 +2,44 @@
   #card-wrapper {
     border: 1px solid var(--diagnostics-border-color);
     border-radius: 14px;
-    height: 180px;
     margin: 10px 0;
+    min-height: 150px;
   }
 
   .body-container {
-    column-gap: 15px;
+    column-gap: 10px;
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
+    justify-content: end;
+    row-gap: 5px;
   }
 
-  .title-container {
-    @apply --diagnostics-default-font;
+  .card-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
 
   .spacing {
-    margin-top: 18px;
+    margin: 18px 0px;
     padding-inline-end: 15px;
     padding-inline-start: 15px;
   }
+
+  .title-container {
+    @apply --diagnostics-default-font;
+  }
 </style>
 
 <div id="card-wrapper">
   <div id="title" class="title-container spacing">
     <slot name="title"></slot>
   </div>
-  <div>
-    <slot name="left-panel"></slot>
-  </div>
-  <div id="body" class="body-container spacing">
-    <slot name="body"></slot>
+  <div class="card-columns spacing">
+    <div>
+      <slot name="left-panel"></slot>
+    </div>
+    <div id="body" class="body-container">
+      <slot name="body"></slot>
+    </div>
   </div>
 </div>