Implement creation and positioning of statusDiv within registered hostElement

service.js

@@ -12,10 +12,11 @@ class BesService {
     this.hostElement = hostElement
     this.timer = null
     this.children = []
-    const { correctionPanel, scrollPanel, statusIcon } =
+    const { correctionPanel, scrollPanel, statusDiv, statusIcon } =
       this.createCorrectionPanel(hostElement)
     this.correctionPanel = correctionPanel
     this.scrollPanel = scrollPanel
+    this.statusDiv = statusDiv
     this.statusIcon = statusIcon
     this.offsetTop = null
     this.textAreaService = null
@@ -213,11 +214,15 @@ class BesService {
     panelParent.appendChild(correctionPanel)
     hostElement.parentElement.insertBefore(panelParent, hostElement)
 
+    const statusDiv = document.createElement('div')
+    statusDiv.classList.add('bes-status-div')
     const statusIcon = document.createElement('div')
     statusIcon.classList.add('bes-status-icon')
-    correctionPanel.appendChild(statusIcon)
+    statusDiv.appendChild(statusIcon)
+    this.setStatusDivPosition(hostElement, statusDiv)
+    hostElement.parentNode.insertBefore(statusDiv, hostElement.nextSibling)
 
-    return { correctionPanel, scrollPanel, statusIcon }
+    return { correctionPanel, scrollPanel, statusDiv, statusIcon }
   }
 
   /**
@@ -587,6 +592,12 @@ class BesService {
     scrollPanel.style.height = hostElement.scrollHeight + 'px'
   }
 
+  setStatusDivPosition(hostElement, statusDiv) {
+    const hRects = hostElement.getBoundingClientRect()
+    statusDiv.style.left = hRects.right - 40 + 'px'
+    statusDiv.style.top = hRects.top + hRects.height - 30 + 'px'
+  }
+
   static isPointInRect(x, y, rect) {
     return (
       x >= rect.x &&
@@ -974,6 +985,7 @@ window.onresize = () => {
       service.correctionPanel,
       service.scrollPanel
     )
+    service.setStatusDivPosition(service.hostElement, service.statusDiv)
     service.children.forEach(child => {
       service.clearMistakeMarkup(child.element)
       child.matches.forEach(match => {

styles.css

@@ -65,14 +65,20 @@
   padding: 0px;
 }
 
-.bes-status-icon {
+.bes-status-div {
   position: absolute;
+  z-index: 3;
+}
+
+.bes-status-icon {
+  position: relative;
   right: 5px;
   bottom: 5px;
   width: 30px;
   height: 30px;
   background-size: contain;
   background-repeat: no-repeat;
+  cursor: pointer;
 }
 
 .bes-status-icon.bes-status-success {