diff --git a/src/app.scss b/src/app.scss
index 9bb3a1c..dac3275 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -6,3 +6,11 @@ p {
 .ct-page-fill {
   height: 100% !important;
 }
+
+.config-container {
+    row-gap: var(--pf-global--spacer--sm);
+
+    > .pf-c-card {
+        min-width: 30rem;
+    }
+}
diff --git a/src/config.jsx b/src/config.jsx
index 2c97ea4..5b1e1df 100644
--- a/src/config.jsx
+++ b/src/config.jsx
@@ -22,6 +22,7 @@ import React from "react";
 import {
     Breadcrumb, BreadcrumbItem,
     Button,
+    Flex,
     Form,
     FormGroup,
     FormSelect,
@@ -384,7 +385,7 @@ class GeneralConfig extends React.Component {
         return (
             <Card>
                 <CardTitle>General Config</CardTitle>
-                <CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
+                <CardBody>{form}</CardBody>
             </Card>
         );
     }
@@ -547,7 +548,7 @@ class SssdConfig extends React.Component {
         return (
             <Card>
                 <CardTitle>SSSD Config</CardTitle>
-                <CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
+                <CardBody>{form}</CardBody>
             </Card>
         );
     }
@@ -573,8 +574,10 @@ groupProps={{ sticky: 'top' }}
                   </Breadcrumb>
               }>
             <PageSection>
-                <GeneralConfig />
-                <SssdConfig />
+                <Flex className="config-container">
+                    <GeneralConfig />
+                    <SssdConfig />
+                </Flex>
             </PageSection>
         </Page>
     );