Update member header layout

scss/atat.scss

@@ -33,3 +33,4 @@
 @import 'sections/request_approval';
 @import 'sections/projects_list';
 @import 'sections/project_edit';
+@import 'sections/member_edit';

scss/sections/_member_edit.scss

@@ -0,0 +1,37 @@
+.member-card {
+  @include grid-row;
+  padding: $gap*2;
+  justify-content: space-between;
+
+  dl {
+    margin: 0;
+
+    > div {
+      margin-bottom: $gap;
+    }
+  }
+
+  dt {
+    font-weight: normal;
+    color: $color-gray;
+  }
+
+  dd {
+    display: inline;
+  }
+
+  .member-card__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .member-card__heading {
+    margin: 0;
+    @include h2;
+  }
+
+  .member-card__details {
+   text-align: right;
+ }
+}

templates/member_edit.html.to

@@ -16,16 +16,23 @@
   level="info"
   ) %}
 
-  <div class='panel'>
+  <div class='panel member-card'>
-    <div class='panel__heading'>
+    <div class='member-card__header'>
-      <h1 class='h2'>{{ member_name }}</h1>
+      <h1 class='member-card__heading'>{{ member_name }}</h1>
-      <div>Workspace Role <span class="label">{{member_workspace_role}}</span></div>
+      <dl><dt>Workspace Role</dt> <dd class='label'>{{member_workspace_role}}</dd></dl>
-
+    </div>
-      DOD ID:
+    <div class='member-card__details'>
-      {{ member_id }}
+      <dl>
-      Email:
+        <div>
-      {{ member_email }}
+          <dt>DOD ID:</dt>
-      <a href="#" class="icon-link">edit account details</a>
+          <dd>{{ member_id }}</dd>
+        </div>
+        <div>
+          <dt>Email:</dt>
+          <dd>{{ member_email }}</dd>
+        </div>
+      </dl>
+      <a href='#' class='icon-link'>edit account details</a>
     </div>
   </div>