Align Accordion desciption with filler div

src/components/Accordion/Accordion.scss

@@ -18,6 +18,17 @@
     &.open {
       margin-top: 0;
     }
+
+    div {
+      min-width: 40px;
+      max-width: 40px;
+      margin: 0.6em;
+    }
+
+    p {
+      padding-left: 1em;
+      margin: auto;
+    }
   }
 
   button {
@@ -26,13 +37,14 @@
     background-color: $white;
     width: 100%;
     margin: 0;
+    padding: 0;
     border: 0;
     outline: none;
   }
 
   h5 {
     display: flex;
-    flex: 9;
+    flex: 1;
     text-align: center;
     padding-left: 1em;
     color: $blue;

src/components/Accordion/Accordion.tsx

@@ -12,7 +12,7 @@ export interface AccordionState {
 
 const Description = ({text, visible}) => (
   <div className={`accordion__desc ${visible ? "open" : ""}`}>
-    <p>{text}</p>
+    <div/><p>{text}</p>
   </div>
 );
 

src/components/AccordionIcon/AccordionIcon.scss

@@ -2,8 +2,6 @@
 
 .accordion-icon {
   display: flex;
-  flex: 1;
-  flex-grow: 1;
   background-color: $blue;
   color: $white;
   align-items: center;