add second column to dashboard

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -21,9 +21,21 @@
   .content {
     padding: 0.5em;
   }
+  .dashboard-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: stretch;
+  }
   .dashboard-column {
     display: flex;
     flex-direction: column;
+    
+    /* make all columns equal width - flex-basis:0 to make all resizing start from the same size*/
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    
   }
 
   .editable-hovered {
@@ -34,7 +46,6 @@
     visibility: visible;
   }
 
-
   .handle {
     display: block;
     height: 1.5em;
@@ -68,16 +79,16 @@
     <p>{{dashboard.description}}</p>
   </div>
 
-  <div cdkDropListGroup>
+  <div cdkDropListGroup class="dashboard-area">
     <div 
       cdkDropList
       class="dashboard-column"
-      *ngFor="let column of dashboard.arrangement"
-      [cdkDropListData]="column"
+      *ngFor="let i of [0,1]"
+      [cdkDropListData]="i"
       (cdkDropListDropped)="drop($event)">
       <div 
         cdkDrag 
-        *ngFor="let id of column" 
+        *ngFor="let id of dashboard.arrangement[i]" 
         [attr.widget-id]="id">
         <div cdkDragHandle class="handle"><img src="/assets/img/drag_handle.svg" class="icon-small"/></div>
         <app-text-widget