first cut horizontal layout

src/vs/workbench/browser/parts/editor/editorPart.ts

@@ -941,7 +941,7 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 			activePosition = Position.LEFT;
 		}
 
-		// Validate width ratios
+		// Validate ratios
 		const positions = rightEditors.length ? 3 : centerEditors.length ? 2 : 1;
 		if (!ratio || ratio.length !== positions) {
 			if (!this.getVisibleEditors().length) {
@@ -1164,7 +1164,7 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 	private findPosition(input: EditorInput, options?: EditorOptions, desiredPosition?: Position, ratio?: number[]): Position;
 	private findPosition(input: EditorInput, options?: EditorOptions, arg1?: any, ratio?: number[]): Position {
 
-		// With defined width ratios, always trust the provided position
+		// With defined ratios, always trust the provided position
 		if (ratio && types.isNumber(arg1)) {
 			return arg1;
 		}

src/vs/workbench/browser/parts/editor/media/sidebyside.css

@@ -57,12 +57,17 @@
 
 .monaco-workbench > .editor > .content > .one-editor-silo.editor-left {
 	left: 0;
+	top: 0;
 }
 
-.monaco-workbench > .editor > .content > .one-editor-silo.editor-right {
+.monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
 	right: 0;
 }
 
+.monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-right {
+	bottom: 0;
+}
+
 .monaco-workbench > .editor > .content > .one-editor-silo.dragging {
 	z-index: 2000000;
 	box-sizing: content-box;
@@ -73,31 +78,46 @@
 	border-right: 1px solid #E7E7E7;
 }
 
-.vs .monaco-workbench > .editor > .content > .one-editor-silo.editor-center,
-.vs .monaco-workbench > .editor > .content > .one-editor-silo.editor-right {
+.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-center,
+.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
 	border-left: 1px solid #E7E7E7;
 }
 
+.vs .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-center,
+.vs .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-right {
+	border-top: 1px solid #E7E7E7;
+}
+
 .vs-dark .monaco-workbench > .editor > .content > .one-editor-silo.dragging {
 	border-left: 1px solid #444;
 	border-right: 1px solid #444;
 }
 
-.vs-dark .monaco-workbench > .editor > .content > .one-editor-silo.editor-center,
-.vs-dark .monaco-workbench > .editor > .content > .one-editor-silo.editor-right {
+.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-center,
+.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
 	border-left: 1px solid #444;
 }
 
+.vs-dark .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-center,
+.vs-dark .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-right {
+	border-top: 1px solid #444;
+}
+
 .hc-black .monaco-workbench > .editor > .content > .one-editor-silo.dragging {
 	border-left: 1px solid #6FC3DF;
 	border-right: 1px solid #6FC3DF;
 }
 
-.hc-black .monaco-workbench > .editor > .content > .one-editor-silo.editor-center,
-.hc-black .monaco-workbench > .editor > .content > .one-editor-silo.editor-right {
+.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-center,
+.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
 	border-left: 1px solid #6FC3DF;
 }
 
+.hc-black .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-center,
+.hc-black .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-right {
+	border-top: 1px solid #6FC3DF;
+}
+
 .monaco-workbench > .editor > .content > .one-editor-silo.draggedunder {
 	transition: left 200ms ease-out;
 }