fix(card): force horizontal cards meta, extra content and actions to …

…align properly

As reported in #159, the meta data, actions and extra content are forced to display in one row in horizontal cards. It's because of `flex-direction: row` setting `flex-wrap: wrap`, and the flex item for meta data has no initial size. So, it forces the other flex items to wrap in available spaces next to it which leads them displaying in the same row.

Since, the extra content and buttons are always supposed to appear on the next line and should take 100% width of the card. The meta data should have initial size with minimum value which will make sure the meta data to wrap in the available space on the current row and the extra content and buttons to appear in the next row respectively.

Closes #159

src/definitions/views/card.less

@@ -430,6 +430,7 @@
 .ui.horizontal.cards > .card,
 .ui.card.horizontal {
   flex-direction: row;
+  flex-wrap: wrap;
   min-width: @horizontalMinWidth;
   width: @horizontalWidth;
   max-width: 100%;
@@ -457,6 +458,12 @@
   height: 100%;
   border-radius: @defaultBorderRadius 0 0 @defaultBorderRadius;
 }
+.ui.horizontal.cards > .card > .content, .ui.horizontal.card > .content {
+  flex-basis: 1px;
+}
+.ui.horizontal.cards > .card > .extra, .ui.horizontal.card > .extra {
+  flex-basis: 100%;
+}
 
 /*-------------------
        Raised