diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index 56a7da7ec6..b6e97fac39 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -79,7 +79,9 @@ limitations under the License.
 .mx_MessageComposer_composecontrols {
     width: 100%;
 }
-
+.mx_MessageComposer_e2eIconWrapper {
+    height: 12px; /* Match the height of the E2E icon for alignment */
+}
 .mx_MessageComposer_e2eIcon.mx_E2EIcon {
     position: absolute;
     left: 20px;
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 53e05e69a1..f9aae433fe 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -475,7 +475,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus);
         const e2eIcon = hasE2EIcon && (
-            <E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
+            <div className="mx_MessageComposer_e2eIconWrapper">
+                <E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
+            </div>
         );
 
         const controls: ReactNode[] = [];