diff --git a/src/components/ProfilePage/elements/FormControls.jsx b/src/components/ProfilePage/elements/FormControls.jsx
index 0ec127b..3980db7 100644
--- a/src/components/ProfilePage/elements/FormControls.jsx
+++ b/src/components/ProfilePage/elements/FormControls.jsx
@@ -15,13 +15,13 @@ function FormControls({
 
   return (
     <div className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center">
-      <div className="form-group">
+      <div className="form-group d-flex flex-wrap">
         <label className="col-form-label" htmlFor={visibilityId}>
           {intl.formatMessage(messages['profile.formcontrols.who.can.see'])}
         </label>
         <VisibilitySelect
           id={visibilityId}
-          className="w-auto"
+          className="d-flex align-items-center"
           type="select"
           name={visibilityId}
           value={visibility}
diff --git a/src/components/__snapshots__/ProfilePage.test.jsx.snap b/src/components/__snapshots__/ProfilePage.test.jsx.snap
index 75844de..71e2283 100644
--- a/src/components/__snapshots__/ProfilePage.test.jsx.snap
+++ b/src/components/__snapshots__/ProfilePage.test.jsx.snap
@@ -2001,7 +2001,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                    className="form-group"
+                    className="form-group d-flex flex-wrap"
                   >
                     <label
                       className="col-form-label"
@@ -2010,7 +2010,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                       Who can see this:
                     </label>
                     <span
-                      className="w-auto"
+                      className="d-flex align-items-center"
                     >
                       <span
                         className="d-inline-block ml-1 mr-2"