[Grid preparation] Structure the header

Restructure the header to have two child elements

Change-Id: Ib5b7f31419ae6b62f62878947651b8ab843a3955

includes/templates/Header.mustache

@@ -1,4 +1,5 @@
 <header class="mw-header">
+	<div class="mw-header-aside">
 	<label
 		id="mw-sidebar-button"
 		class="mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet mw-ui-icon-element"
@@ -11,6 +12,9 @@
 		<span>{{msg-vector-action-toggle-sidebar}}</span>
 	</label>
 	{{#data-logos}}{{>Logo}}{{/data-logos}}
+	</div>
+	<div class="mw-header-content">
 	{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
 	{{#data-vector-user-links}}{{>UserLinks}}{{/data-vector-user-links}}
+	</div>
 </header>

resources/skins.vector.styles/components/Header.less

@@ -37,6 +37,20 @@
 		flex-grow: 1;
 	}
 
+	&-content,
+	&-aside {
+		display: flex;
+		align-items: center;
+	}
+
+	&-aside {
+		float: left;
+	}
+
+	&-content {
+		flex-grow: 1;
+	}
+
 	@media ( min-width: @width-breakpoint-desktop ) {
 		.vector-search-box {
 			margin-right: @margin-end-search;