Equal height in tokens cards

console/src/main/scripts/plugins/accounts/html/tokens.html

@@ -28,7 +28,7 @@ <h1>No tokens created.</h1>
     </button>
   </div>
 
-  <div class="row row-cards-pf" ng-show="controller.tokens.length && !controller.loading">
+  <div class="row row-cards-pf hk-row-cards-flexbox" ng-show="controller.tokens.length && !controller.loading">
     <div class="col-xs-12 col-sm-6 col-lg-4" ng-repeat="token in controller.tokens">
       <div class="card-pf hk-card-token">
         <h2 class="card-pf-title">

console/src/main/scripts/plugins/accounts/less/accounts.less

@@ -107,4 +107,35 @@ body.inactivity-modal-open .modal:not(.time-out-dialog)
   .hk-select-feedback {
     margin-left: @grid-gutter-width/8;
   }
+}
+
+// Tokens screen
+
+.hk-card-token {
+
+  display: flex;
+  flex-direction: column;
+
+  .card-pf-title {
+    margin-bottom: 0;
+
+    .form-control {
+      margin-bottom: 15px;
+    }
+  }
+
+  .btn.pull-right {
+    margin-left: @grid-gutter-width/4;
+  }
+
+  .card-pf-body {
+    flex: 1 0 auto;
+    margin-bottom: 0;
+    margin-top: 0;
+
+    p {
+      margin-bottom: @grid-gutter-width/2;
+      margin-top: 15px;
+    }
+  }
 }

console/src/main/scripts/plugins/metrics/less/metrics.less

@@ -352,7 +352,6 @@ a:hover {
   }
 }
 
-
 // Cards
 
 .row-cards-pf {
@@ -398,21 +397,28 @@ a:hover {
   margin-left: 5px;
 }
 
-.hk-card-token {
+// Cards Flexbox
 
-  .card-pf-body {
-    margin-top: -5px;
+.hk-row-cards-flexbox {
+  display: flex;
+  flex-wrap: wrap;
 
-    p {
-      margin-top: @grid-gutter-width/2;
-    }
+  &:before,
+  &:after {
+    display: flex;
   }
 
-  .card-pf-title span {
-    margin-right: @grid-gutter-width/4;
+  [class*="col-"] {
+    display: flex;
+    justify-content: center;
+    padding-left: 10px;
+    padding-right: 10px;
   }
-}
 
+  .card-pf {
+    width: 100%;
+  }
+}
 
 // Charts and Legends