[Demo] Issue 4961 - Fix card group field alignment on acceptableads.com

css/main.css

Index: css/main.css
===================================================================
--- a/css/main.css
+++ b/css/main.css
@@ -2,77 +2,85 @@
   box-sizing: border-box; }
 
 body {
   background: grey;
   padding: 0;
   margin: 0; }
 
 h2 {
-  font-size: 30px; }
+  font-size: 26px; }
 
 p {
   margin: 0 0 10px;
   padding: 0; }
 
 .card-group {
-  padding: 30px; }
+  padding: 30px;
+  width: 100%; }
 
 .card {
   background: #fff;
   border: 1px solid black; }
 
 .card__header {
   height: 100px;
   margin-bottom: 20px;
   border: 2px solid plum; }
 
 .card__content {
   border: 2px solid cornflowerblue; }
 
 .card__footer {
   border: 2px solid lightcoral; }
 
-/* Table Layout Fallback
- * Note - requires a set height for the .card__footer
+/* Float Layout Fallback
+ * Note - requires a set height for the .card__footer and .card__content 
  */
-.card-group {
+.card-group:after {
+  clear: both;
+  content: "";
   display: table; }
 
 .card {
-  display: table-cell;
   position: relative;
   width: 100%; }
   @media (min-width: 600px) {
     .card {
-      width: 50%; } }
+      width: 50%;
+      float: left; } }
   @media (min-width: 800px) {
     .card {
       width: 33%; } }
 
 .card__content {
   margin-bottom: 50px; }
+  @media (min-width: 600px) {
+    .card__content {
+      height: 180px; } }
 
 .card__footer {
   height: 30px;
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0; }
 
 /* Grid Layout Enhancement
- *
+ * Note - Only requires set height for the .card__header, and a max width for each .card
  */
-@supports (display: grid) {
+@supports not (display: grid) {
   .card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
   .card {
     display: inline-grid;
     grid-template-rows: minmax(100px, auto) 1fr auto; }
     @media all {
       .card {
-        width: 100%; } }
+        width: 100%;
+        float: none; } }
   .card__content {
-    margin-bottom: 20px; }
+    margin-bottom: 20px;
+    height: auto; }
   .card__footer {
     position: relative;
     height: auto; } }