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

css/main.css

Index: css/main.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,78 @@
+* {
+  box-sizing: border-box; }
+
+body {
+  background: grey;
+  padding: 0;
+  margin: 0; }
+
+h2 {
+  font-size: 30px; }
+
+p {
+  margin: 0 0 10px;
+  padding: 0; }
+
+.card-group {
+  padding: 30px; }
+
+.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
+ */
+.card-group {
+  display: table; }
+
+.card {
+  display: table-cell;
+  position: relative;
+  width: 100%; }
+  @media (min-width: 600px) {
+    .card {
+      width: 50%; } }
+  @media (min-width: 800px) {
+    .card {
+      width: 33%; } }
+
+.card__content {
+  margin-bottom: 50px; }
+
+.card__footer {
+  height: 30px;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0; }
+
+/* Grid Layout Enhancement
+ *
+ */
+@supports (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%; } }
+  .card__content {
+    margin-bottom: 20px; }
+  .card__footer {
+    position: relative;
+    height: auto; } }