diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 4cf141e85..3ed964921 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -21,7 +21,9 @@
     <div style="display: flex;width: 100%; height: 100%">
       <div class="mermaid" style="width: 100%; height: 100%">
         stateDiagram
-          A --> B : this text causes the rendering bug
+          O --> A : ong line using<br/>should work<br/>should work<br/>should work
+          A --> B : ong line using<br/>should work
+          B --> C : Sing line
 
       </div>
 </div>
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index a841e64ed..c335711ec 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -457,6 +457,9 @@ export const drawEdge = function(elem, path, relation) {
 
     let titleHeight = 0;
     const titleRows = [];
+    let maxWidth = 0;
+    let minX = 0;
+    let totalHeight = 0;
     for (let i = 0; i <= rows.length; i++) {
       const title = label
         .append('text')
@@ -465,8 +468,11 @@ export const drawEdge = function(elem, path, relation) {
         .attr('x', x)
         .attr('y', y + titleHeight);
 
-      const boundstmp = label.node().getBBox();
-      logger.info(boundstmp, x, y + titleHeight);
+      const boundstmp = title.node().getBBox();
+      maxWidth = Math.max(maxWidth, boundstmp.width);
+      minX = Math.min(minX, boundstmp.x);
+
+      logger.info(boundstmp.x, x, y + titleHeight);
 
       if (titleHeight === 0) {
         const titleBox = title.node().getBBox();
@@ -476,20 +482,23 @@ export const drawEdge = function(elem, path, relation) {
       titleRows.push(title);
     }
 
+    let boxHeight = titleHeight * rows.length;
     if (rows.length > 1) {
-      const heightAdj = rows.length * titleHeight * 0.25;
+      const heightAdj = (rows.length - 1) * titleHeight * 0.5;
 
       titleRows.forEach((title, i) => title.attr('y', y + i * titleHeight - heightAdj));
+      boxHeight = titleHeight * rows.length;
     }
 
     const bounds = label.node().getBBox();
+
     label
       .insert('rect', ':first-child')
       .attr('class', 'box')
-      .attr('x', bounds.x - getConfig().state.padding / 2)
-      .attr('y', y - titleHeight)
-      .attr('width', bounds.width + getConfig().state.padding)
-      .attr('height', titleHeight + getConfig().state.padding);
+      .attr('x', x - maxWidth / 2 - getConfig().state.padding / 2)
+      .attr('y', y - boxHeight / 2 - getConfig().state.padding / 2 - 3.5)
+      .attr('width', maxWidth + getConfig().state.padding)
+      .attr('height', boxHeight + getConfig().state.padding);
 
     logger.info(bounds);