.editor-container { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: row; } .split-vertical-view { height: 100%; transition-duration: 500ms; transition-property: background-color; background-color: transparent; border-right: 1px solid grey; width: 5px; } .split-vertical-view:hover { background-color: dodgerblue; border-right: 1px solid dodgerblue; cursor: col-resize; } .editor-hierachy { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .editor-content { height: 100%; flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; } .editor-code { width: 100%; flex-grow: 1; overflow: hidden; } .split-horizontal-view { width: 100%; transition-duration: 500ms; transition-property: background-color; background-color: transparent; border-top: 1px solid grey; height: 5px; } .split-horizontal-view:hover { background-color: dodgerblue; border-right: 1px solid dodgerblue; cursor: row-resize; } .editor-console { width: 100%; }