html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  height: 100%;
  
  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
  margin: 0px;
  width: 400px;
  height: 100%;
  white-space: nowrap;
}

.splitter {
  flex: 0 0 auto;
  width: 8px;  
  height: 100%;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAQAAABOpSL+AAAAIklEQVR4AWMwbb/PdR+JZDD9f1/oPhI5sgVGBSruc9xHIgGdSQqqQJGkRgAAAABJRU5ErkJggg==') center center no-repeat yellow;
  cursor: col-resize;  
}

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 0px;
  width: 100%;
  height: 100%;
}