split view header use flex

src/vs/base/browser/ui/splitview/splitview.css

@@ -28,6 +28,7 @@
 	padding-left: 20px;
 	background: rgba(128, 128, 128, 0.2);
 	overflow: hidden;
+	display: flex;
 }
 
 .monaco-split-view > .split-view-view > .header.collapsible {

src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css

@@ -27,14 +27,15 @@
 }
 
 .monaco-workbench .viewlet .collapsible.header .actions {
-	float: right;
+	flex: 1;
 	padding-right: 8px;
-	width: 0; /* not using display: none for keyboard a11y reasons */
+	padding-left: 5px;
+	visibility: collapse; /* not using display: none for keyboard a11y reasons */
 }
 
 .monaco-workbench .viewlet .split-view-view:hover .actions,
 .monaco-workbench .viewlet .collapsible.header.focused .actions {
-	width: initial;
+	visibility: initial;
 }
 
 .monaco-workbench .viewlet .collapsible.header .actions .action-label {

src/vs/workbench/parts/debug/browser/debugViewlet.ts

@@ -66,9 +66,10 @@ class VariablesView extends viewlet.CollapsibleViewletView {
 	}
 
 	public renderHeader(container: HTMLElement): void {
-		super.renderHeader(container);
 		const titleDiv = $('div.title').appendTo(container);
 		$('span').text(nls.localize('variables', "Variables")).appendTo(titleDiv);
+
+		super.renderHeader(container);
 	}
 
 	public renderBody(container: HTMLElement): void {
@@ -143,9 +144,10 @@ class WatchExpressionsView extends viewlet.CollapsibleViewletView {
 	}
 
 	public renderHeader(container: HTMLElement): void {
-		super.renderHeader(container);
 		const titleDiv = $('div.title').appendTo(container);
 		$('span').text(nls.localize('watch', "Watch")).appendTo(titleDiv);
+
+		super.renderHeader(container);
 	}
 
 	public renderBody(container: HTMLElement): void {
@@ -213,12 +215,13 @@ class CallStackView extends viewlet.CollapsibleViewletView {
 	}
 
 	public renderHeader(container: HTMLElement): void {
-		super.renderHeader(container);
 		const title = $('div.debug-call-stack-title').appendTo(container);
 		$('span.title').text(nls.localize('callStack', "Call Stack")).appendTo(title);
 		this.pauseMessage = $('span.pause-message').appendTo(title);
 		this.pauseMessage.hide();
 		this.pauseMessageLabel = $('span.label').appendTo(this.pauseMessage);
+
+		super.renderHeader(container);
 	}
 
 	public renderBody(container: HTMLElement): void {
@@ -326,9 +329,10 @@ class BreakpointsView extends viewlet.AdaptiveCollapsibleViewletView {
 	}
 
 	public renderHeader(container: HTMLElement): void {
-		super.renderHeader(container);
 		const titleDiv = $('div.title').appendTo(container);
 		$('span').text(nls.localize('breakpoints', "Breakpoints")).appendTo(titleDiv);
+
+		super.renderHeader(container);
 	}
 
 	public renderBody(container: HTMLElement): void {

src/vs/workbench/parts/files/browser/views/explorerView.ts

@@ -92,10 +92,10 @@ export class ExplorerView extends CollapsibleViewletView {
 	}
 
 	public renderHeader(container: HTMLElement): void {
-		super.renderHeader(container);
-
 		let titleDiv = $('div.title').appendTo(container);
 		$('span').text(this.workspace.name).appendTo(titleDiv);
+
+		super.renderHeader(container);
 	}
 
 	public renderBody(container: HTMLElement): void {

src/vs/workbench/parts/files/browser/views/workingFilesView.ts

@@ -64,13 +64,13 @@ export class WorkingFilesView extends AdaptiveCollapsibleViewletView {
 	}
 
 	public renderHeader(container: HTMLElement): void {
-		super.renderHeader(container);
-
 		let titleDiv = $('div.title').appendTo(container);
 		$('span').text(nls.localize('workingFiles', "Working Files")).appendTo(titleDiv);
 
 		this.dirtyCountElement = $('div.monaco-count-badge').appendTo(titleDiv).hide().getHTMLElement();
 		this.updateDirtyIndicator();
+
+		super.renderHeader(container);
 	}
 
 	public getActions(): IAction[] {