diff --git a/src/alert/alert.module.css b/src/alert/alert.module.css
index d5b95121..926df0f8 100644
--- a/src/alert/alert.module.css
+++ b/src/alert/alert.module.css
@@ -3,8 +3,15 @@
     border-width: 1px;
     color: var(--reactist-content-primary);
     padding: var(--reactist-spacing-small);
+}
+
+.content {
     /* this is to make sure it always has the same minimum height, whether it has a close button or not */
-    min-height: calc(2 * var(--reactist-spacing-small) + var(--reactist-button-small-height) + 2px);
+    min-height: var(--reactist-button-small-height);
+}
+
+.icon {
+    display: block;
 }
 
 .tone-info {
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index cbb1eff1..bce2f8fc 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -35,14 +35,15 @@ function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
         >
             <Columns space="small" alignY="center">
                 <Column width="content">
-                    <Box display="flex" alignItems="center">
-                        <AlertIcon tone={tone} className={styles.icon} />
-                    </Box>
+                    <AlertIcon tone={tone} className={styles.icon} />
                 </Column>
                 <Column>
                     <Box
                         paddingY="xsmall"
                         paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}
+                        display="flex"
+                        alignItems="center"
+                        className={styles.content}
                     >
                         {children}
                     </Box>