diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
index a79b987cb0..a55151d711 100644
--- a/src/components/dialog/Dialog.css
+++ b/src/components/dialog/Dialog.css
@@ -36,7 +36,6 @@
 .p-dialog-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     flex-shrink: 0;
 }
 
@@ -47,6 +46,7 @@
 .p-dialog .p-dialog-header-icons {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
 }
 
 .p-dialog .p-dialog-header-icon {
@@ -57,6 +57,10 @@
     position: relative;
 }
 
+.p-dialog .p-dialog-title {
+    flex-grow: 1;
+}
+
 /* Fluid */
 .p-fluid .p-dialog-footer .p-button {
     width: auto;
diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
index 4209b1ae0c..5e7db78118 100644
--- a/src/components/dialog/Dialog.js
+++ b/src/components/dialog/Dialog.js
@@ -589,7 +589,7 @@ export class Dialog extends Component {
 
             return (
                 <div ref={el => this.headerEl = el} className="p-dialog-header" onMouseDown={this.onDragStart}>
-                    <span id={this.state.id + '_header'} className="p-dialog-title">{header}</span>
+                    <div id={this.state.id + '_header'} className="p-dialog-title">{header}</div>
                     <div className="p-dialog-header-icons">
                         {icons}
                         {maximizeIcon}