From 7731f0a7615ff3686d62c503f0fe47c54decb4b3 Mon Sep 17 00:00:00 2001
From: Mike <Mhomolak@yahoo.com>
Date: Fri, 12 Jan 2018 08:51:41 -0700
Subject: [PATCH] fix: HTML structure for button alignment

---
 src/js/component-owner.js | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/js/component-owner.js b/src/js/component-owner.js
index 44e9954..0905e3e 100755
--- a/src/js/component-owner.js
+++ b/src/js/component-owner.js
@@ -118,6 +118,19 @@ class ComponentOwner extends React.Component {
 		return (
 			<div id={opts.id} className="o-coach-mark__container"  style={{ zIndex: opts.zIndex || 1200 }}>
 				<div className="o-coach-mark__content-container">
+					<button
+						className="o-coach-mark__close-icon"
+						onClick={(event) => removeCoachMark(event)}
+						style={meatballTitleStyle}
+					>
+						<svg role="img"
+							 aria-labelledby="r2"
+							 focusable="false"
+							 className="pe-icon--remove-sm-18">
+						<title id="r2">Close dialog</title>
+						<use xlinkHref="#remove-sm-18"></use>
+						</svg>
+					</button>
 					<div className={`o-coach-mark__content ${placement}`}>
 						<div>
 							{meatball}
@@ -130,19 +143,7 @@ class ComponentOwner extends React.Component {
 						</div>
 						{extras}
 					</div>
-						<button
-							className="o-coach-mark__close-icon"
-							onClick={(event) => removeCoachMark(event)}
-							style={meatballTitleStyle}
-						>
-							<svg role="img"
-							   aria-labelledby="r2"
-							   focusable="false"
-							   className="pe-icon--remove-sm-18">
-							<title id="r2">Close dialog</title>
-							<use xlinkHref="#remove-sm-18"></use>
-						  </svg>
-						</button>
+
 				</div>
 			</div>
 		);