diff --git a/common/changes/office-ui-fabric-react/coachmarkTeachingBubbleFix_2018-06-06-20-52.json b/common/changes/office-ui-fabric-react/coachmarkTeachingBubbleFix_2018-06-06-20-52.json
new file mode 100644
index 0000000000000..379837a965cac
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/coachmarkTeachingBubbleFix_2018-06-06-20-52.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "TeachingBubble: Fix content from wrapping to next line unncessarily",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "edwl@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
index 82e655e7d39dd..3d8d5369de048 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
@@ -60,6 +60,7 @@
   max-width: 364px;
   border: 0;
   box-shadow: none !important;
+  width: calc(100% + 1px);
 
   animation-name: (bounceAnimation, opacityFadeIn);
   animation-duration: 2000ms;
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index 76f5443945861..f6648bf25f4ac 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -45,7 +45,7 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
   }
 
   public render(): JSX.Element {
-    const { calloutProps: setCalloutProps, targetElement, onDismiss } = this.props;
+    const { calloutProps: setCalloutProps, targetElement, onDismiss, isWide } = this.props;
     const calloutProps = { ...this._defaultCalloutProps, ...setCalloutProps };
 
     return (
@@ -56,7 +56,7 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
         className={css(
           'ms-TeachingBubble',
           styles.root,
-          this.props.isWide ? styles.wideCallout : null,
+          isWide ? styles.wideCallout : null,
           calloutProps ? calloutProps.className : undefined
         )}
       >
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
index dd9cde00d7086..00d53688b6eb8 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
@@ -26,6 +26,7 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
 
   public render(): JSX.Element {
     const {
+      children,
       illustrationImage,
       primaryButtonProps,
       secondaryButtonProps,
@@ -34,7 +35,8 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
       hasCloseIcon,
       onDismiss,
       closeButtonAriaLabel,
-      hasSmallHeadline
+      hasSmallHeadline,
+      isWide
     } = this.props;
 
     let imageContent;
@@ -68,10 +70,10 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
       );
     }
 
-    if (this.props.children) {
+    if (children) {
       bodyContent = (
         <div className={css('ms-TeachingBubble-body', styles.body)}>
-          <p className={css('ms-TeachingBubble-subText', styles.subText)}>{this.props.children}</p>
+          <p className={css('ms-TeachingBubble-subText', styles.subText)}>{children}</p>
         </div>
       );
     }
@@ -112,14 +114,14 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
     }
 
     return (
-      <div className={css('ms-TeachingBubble-content', styles.root)}>
+      <div className={css('ms-TeachingBubble-content', styles.root, isWide ? styles.wideCallout : null)}>
         {imageContent}
-        {closeButton}
         <div className={css('ms-TeachingBubble-bodycontent', styles.bodyContent)}>
           {headerContent}
           {bodyContent}
           {footerContent}
         </div>
+        {closeButton}
       </div>
     );
   }