SOURCE

var help = document.querySelector(".help");
help.innerHTML = help.offsetWidth;

<div class='left-panel'>
<div class='editor'>
  <div class='mide'>
    <div class='scroll'>
    </div>
    <div class='CodeMirror'>
    </div>
    
  </div>
  <div class='help'>
    </div>
  
</div>
</div>

div{
  height: 90%;
}
.left-panel{
  background-color: white;
  position: absolute;
  width: 500px;
  height: 200px;
}

.editor{
    position: relative;
    overflow: visible;
    background-color: green;
    -webkit-user-select: initial;
    transition: all 500ms ease-in-out;
    width: calc(100% - 30px * 2 - 10px);
    padding: 0 calc(30px + 10px) 0 30px;
}
.mide{
  position: absolute;
    overflow: visible;
    width: calc(100% - 30px * 2 + 10px);
    height: calc(100% - 30px) ;
  background: blue;
}

.scroll{  
  position: absolute;
  width: 10px;
  right: -10px;
  background: yellow;
}
.help{  
  top: 90%;
  position: absolute;
  width: calc(100%  / 3);
  height: 5px;
  background: white;
}


.CodeMirror{
  position: absolute;
  width: calc(100% - 30px * 2);
  background: #333;
}