diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 028d9a75562..72eb11dc5c0 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -297,14 +297,15 @@ $left-gutter: 64px;
    https://github.com/vector-im/vector-web/issues/1154
     */
 .mx_EventTile_content {
-    display: block;
     overflow-y: hidden;
     overflow-x: hidden;
     margin-right: 34px;
 }
 
-/* De-zalgoing */
 .mx_EventTile_body {
+    text-align: start;
+
+    /* De-zalgoing */
     overflow-y: hidden;
 }
 
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 1dc342fac50..4f4bcea23dc 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -477,13 +477,13 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
     });
 
     return isDisplayedWithHtml ?
-        <span
+        <div
             key="body"
             ref={opts.ref}
             className={className}
             dangerouslySetInnerHTML={{ __html: safeBody }}
             dir="auto"
-        /> : <span key="body" ref={opts.ref} className={className} dir="auto">{ strippedBody }</span>;
+        /> : <div key="body" ref={opts.ref} className={className} dir="auto">{ strippedBody }</div>;
 }
 
 /**
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 353f40b6a90..6aa1b074e16 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -532,7 +532,7 @@ export default class TextualBody extends React.Component {
         switch (content.msgtype) {
             case "m.emote":
                 return (
-                    <span className="mx_MEmoteBody mx_EventTile_content">
+                    <div className="mx_MEmoteBody mx_EventTile_content">
                         *&nbsp;
                         <span
                             className="mx_MEmoteBody_sender"
@@ -543,14 +543,14 @@ export default class TextualBody extends React.Component {
                         &nbsp;
                         { body }
                         { widgets }
-                    </span>
+                    </div>
                 );
             case "m.notice":
                 return (
-                    <span className="mx_MNoticeBody mx_EventTile_content">
+                    <div className="mx_MNoticeBody mx_EventTile_content">
                         { body }
                         { widgets }
-                    </span>
+                    </div>
                 );
             default: // including "m.text"
                 return (
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index 0a6d47a72b4..0bddea8df7f 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/test/components/views/messages/TextualBody-test.js
@@ -54,7 +54,7 @@ describe("<TextualBody />", () => {
         const wrapper = mount(<TextualBody mxEvent={ev} />);
         expect(wrapper.text()).toBe("* sender winks");
         const content = wrapper.find(".mx_EventTile_body");
-        expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">winks</span>');
+        expect(content.html()).toBe('<div class="mx_EventTile_body" dir="auto">winks</div>');
     });
 
     it("renders m.notice correctly", () => {
@@ -79,7 +79,7 @@ describe("<TextualBody />", () => {
         const wrapper = mount(<TextualBody mxEvent={ev} />);
         expect(wrapper.text()).toBe(ev.getContent().body);
         const content = wrapper.find(".mx_EventTile_body");
-        expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`);
+        expect(content.html()).toBe(`<div class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</div>`);
     });
 
     describe("renders plain-text m.text correctly", () => {
@@ -107,7 +107,7 @@ describe("<TextualBody />", () => {
             const wrapper = mount(<TextualBody mxEvent={ev} />);
             expect(wrapper.text()).toBe(ev.getContent().body);
             const content = wrapper.find(".mx_EventTile_body");
-            expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`);
+            expect(content.html()).toBe(`<div class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</div>`);
         });
 
         // If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
@@ -126,9 +126,9 @@ describe("<TextualBody />", () => {
             const wrapper = mount(<TextualBody mxEvent={ev} />);
             expect(wrapper.text()).toBe(ev.getContent().body);
             const content = wrapper.find(".mx_EventTile_body");
-            expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">' +
+            expect(content.html()).toBe('<div class="mx_EventTile_body" dir="auto">' +
                 'Visit <a href="https://matrix.org/" class="linkified" target="_blank" rel="noreferrer noopener">' +
-                'https://matrix.org/</a></span>');
+                'https://matrix.org/</a></div>');
         });
     });
 
@@ -163,8 +163,8 @@ describe("<TextualBody />", () => {
             const wrapper = mount(<TextualBody mxEvent={ev} />);
             expect(wrapper.text()).toBe("foo baz bar del u");
             const content = wrapper.find(".mx_EventTile_body");
-            expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
-                ev.getContent().formatted_body + '</span>');
+            expect(content.html()).toBe('<div class="mx_EventTile_body markdown-body" dir="auto">' +
+                ev.getContent().formatted_body + '</div>');
         });
 
         it("spoilers get injected properly into the DOM", () => {
@@ -184,12 +184,12 @@ describe("<TextualBody />", () => {
             const wrapper = mount(<TextualBody mxEvent={ev} />);
             expect(wrapper.text()).toBe("Hey (movie) the movie was awesome");
             const content = wrapper.find(".mx_EventTile_body");
-            expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
+            expect(content.html()).toBe('<div class="mx_EventTile_body markdown-body" dir="auto">' +
                 'Hey <span>' +
                 '<span class="mx_EventTile_spoiler">' +
                 '<span class="mx_EventTile_spoiler_reason">(movie)</span>&nbsp;' +
                 '<span class="mx_EventTile_spoiler_content"><span>the movie was awesome</span></span>' +
-                '</span></span></span>');
+                '</span></span></div>');
         });
 
         // If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
@@ -210,12 +210,12 @@ describe("<TextualBody />", () => {
             const wrapper = mount(<TextualBody mxEvent={ev} />);
             expect(wrapper.text()).toBe("Hey Member");
             const content = wrapper.find(".mx_EventTile_body");
-            expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
+            expect(content.html()).toBe('<div class="mx_EventTile_body markdown-body" dir="auto">' +
                 'Hey <span>' +
                 '<a class="mx_Pill mx_UserPill">' +
                 '<img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" ' +
                 'style="width: 16px; height: 16px;" title="@member:domain.bla" alt="" aria-hidden="true">Member</a>' +
-                '</span></span>');
+                '</span></div>');
         });
 
         it("pills do not appear for event permalinks", () => {