diff --git a/.gitignore b/.gitignore
index dc69cdf75..80e73896a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 
 # misc
 .DS_Store
+.vscode
 .env.local
 .env.development.local
 .env.test.local
diff --git a/scripts/__snapshots__/e2e-templates.test.js.snap b/scripts/__snapshots__/e2e-templates.test.js.snap
index 681623d37..bb5d8bd76 100644
--- a/scripts/__snapshots__/e2e-templates.test.js.snap
+++ b/scripts/__snapshots__/e2e-templates.test.js.snap
@@ -328,13 +328,19 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.css
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
-.searchBox {
+.searchbox {
   margin-bottom: 2rem;
 }
 
@@ -359,14 +365,14 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.htm
 
 <div class=\\"container\\">
   <ais-instantsearch [config]=\\"config\\">
-    <div class=\\"container-app\\">
-      <div class=\\"filters\\">
+    <div class=\\"search-panel\\">
+      <div class=\\"search-panel__filters\\">
         <ais-refinement-list attribute=\\"facet1\\"></ais-refinement-list>
         <ais-refinement-list attribute=\\"facet2\\"></ais-refinement-list>
       </div>
 
-      <div class=\\"search-container\\">
-        <div class=\\"searchBox\\">
+      <div class=\\"search-panel__results\\">
+        <div class=\\"searchbox\\">
           <ais-search-box placeholder=\\"Search placeholder\\"></ais-search-box>
         </div>
 
@@ -1020,14 +1026,14 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
   </header>
 
   <div class=\\"container\\">
-    <div class=\\"container-app\\">
-      <div class=\\"filters\\">
+    <div class=\\"search-panel\\">
+      <div class=\\"search-panel__filters\\">
         <div id=\\"facet1-list\\"></div>
         <div id=\\"facet2-list\\"></div>
       </div>
 
-      <div class=\\"search-container\\">
-        <div id=\\"searchBox\\"></div>
+      <div class=\\"search-panel__results\\">
+        <div id=\\"searchbox\\"></div>
         <div id=\\"hits\\"></div>
       </div>
     </div>
@@ -1116,10 +1122,16 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
 .ais-hits {
@@ -1137,7 +1149,7 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
 }
 
-#searchBox {
+#searchbox {
   margin-bottom: 2rem;
 }
 
@@ -1158,7 +1170,7 @@ const search = instantsearch({
 
 search.addWidget(
   instantsearch.widgets.searchBox({
-    container: '#searchBox',
+    container: '#searchbox',
     placeholder: 'Search placeholder',
   })
 );
@@ -1385,13 +1397,19 @@ exports[`Templates React InstantSearch File content: src/App.css 1`] = `
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
-.searchBox {
+.searchbox {
   margin-bottom: 2rem;
 }
 
@@ -1436,14 +1454,14 @@ class App extends Component {
             apiKey=\\"apiKey\\"
             indexName=\\"indexName\\"
           >
-            <div className=\\"container-app\\">
-              <div className=\\"filters\\">
+            <div className=\\"search-panel\\">
+              <div className=\\"search-panel__filters\\">
                 <RefinementList attribute=\\"facet1\\" />
                 <RefinementList attribute=\\"facet2\\" />
               </div>
 
-              <div className=\\"search-container\\">
-                <SearchBox className=\\"searchBox\\" placeholder=\\"Search placeholder\\" />
+              <div className=\\"search-panel__results\\">
+                <SearchBox className=\\"searchbox\\" placeholder=\\"Search placeholder\\" />
                 <Hits hitComponent={Hit} />
 
                 <div className=\\"pagination\\">
@@ -1651,13 +1669,13 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
         api-key=\\"apiKey\\"
         index-name=\\"indexName\\"
       >
-        <div class=\\"container-app\\">
-          <div class=\\"filters\\">
+        <div class=\\"search-panel\\">
+          <div class=\\"search-panel__filters\\">
             <ais-refinement-list attribute-name=\\"facet1\\"></ais-refinement-list>
             <ais-refinement-list attribute-name=\\"facet2\\"></ais-refinement-list>
           </div>
 
-          <div class=\\"search-container\\">
+          <div class=\\"search-panel__results\\">
             <ais-search-box
               placeholder=\\"Search placeholder\\"
               class=\\"ais-SearchBox-form\\"
@@ -1752,13 +1770,19 @@ em {
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
-.searchBox {
+.searchbox {
   margin-bottom: 2rem;
 }
 
diff --git a/templates/Angular InstantSearch/src/app/app.component.css b/templates/Angular InstantSearch/src/app/app.component.css
index d51c6bd58..4e70ecc50 100644
--- a/templates/Angular InstantSearch/src/app/app.component.css	
+++ b/templates/Angular InstantSearch/src/app/app.component.css	
@@ -33,13 +33,19 @@
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
-.searchBox {
+.searchbox {
   margin-bottom: 2rem;
 }
 
diff --git a/templates/Angular InstantSearch/src/app/app.component.html.hbs b/templates/Angular InstantSearch/src/app/app.component.html.hbs
index 5bd0f03f6..c7218e917 100644
--- a/templates/Angular InstantSearch/src/app/app.component.html.hbs	
+++ b/templates/Angular InstantSearch/src/app/app.component.html.hbs	
@@ -12,15 +12,17 @@
 
 <div class="container">
   <ais-instantsearch [config]="config">
-    <div class="container-app">
-      <div class="filters">
+    <div class="search-panel">
+      {{#if attributesForFaceting}}
+      <div class="search-panel__filters">
         {{#each attributesForFaceting}}
         <ais-refinement-list attribute="{{this}}"></ais-refinement-list>
         {{/each}}
       </div>
 
-      <div class="search-container">
-        <div class="searchBox">
+      {{/if}}
+      <div class="search-panel__results">
+        <div class="searchbox">
           <ais-search-box placeholder="{{searchPlaceholder}}"></ais-search-box>
         </div>
 
diff --git a/templates/InstantSearch.js/index.html.hbs b/templates/InstantSearch.js/index.html.hbs
index cb42d6ef3..b30dc5b58 100644
--- a/templates/InstantSearch.js/index.html.hbs
+++ b/templates/InstantSearch.js/index.html.hbs
@@ -31,15 +31,17 @@
   </header>
 
   <div class="container">
-    <div class="container-app">
-      <div class="filters">
+    <div class="search-panel">
+      {{#if attributesForFaceting}}
+      <div class="search-panel__filters">
         {{#each attributesForFaceting}}
         <div id="{{this}}-list"></div>
         {{/each}}
       </div>
 
-      <div class="search-container">
-        <div id="searchBox"></div>
+      {{/if}}
+      <div class="search-panel__results">
+        <div id="searchbox"></div>
         <div id="hits"></div>
       </div>
     </div>
diff --git a/templates/InstantSearch.js/src/app.css b/templates/InstantSearch.js/src/app.css
index ad0b9b980..acb1a0120 100644
--- a/templates/InstantSearch.js/src/app.css
+++ b/templates/InstantSearch.js/src/app.css
@@ -38,10 +38,16 @@ em {
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
 .ais-hits {
@@ -59,7 +65,7 @@ em {
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
 }
 
-#searchBox {
+#searchbox {
   margin-bottom: 2rem;
 }
 
diff --git a/templates/InstantSearch.js/src/app.js.hbs b/templates/InstantSearch.js/src/app.js.hbs
index 87a5df1a3..52a3702f4 100644
--- a/templates/InstantSearch.js/src/app.js.hbs
+++ b/templates/InstantSearch.js/src/app.js.hbs
@@ -8,7 +8,7 @@ const search = instantsearch({
 
 search.addWidget(
   instantsearch.widgets.searchBox({
-    container: '#searchBox',
+    container: '#searchbox',
     {{#if searchPlaceholder}}
     placeholder: '{{searchPlaceholder}}',
     {{/if}}
diff --git a/templates/React InstantSearch/src/App.css b/templates/React InstantSearch/src/App.css
index 644d1d68c..925ccd85c 100644
--- a/templates/React InstantSearch/src/App.css	
+++ b/templates/React InstantSearch/src/App.css	
@@ -38,13 +38,19 @@ em {
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
-.searchBox {
+.searchbox {
   margin-bottom: 2rem;
 }
 
diff --git a/templates/React InstantSearch/src/App.js.hbs b/templates/React InstantSearch/src/App.js.hbs
index a5826a0f4..b95abd912 100644
--- a/templates/React InstantSearch/src/App.js.hbs	
+++ b/templates/React InstantSearch/src/App.js.hbs	
@@ -36,15 +36,17 @@ class App extends Component {
             apiKey="{{apiKey}}"
             indexName="{{indexName}}"
           >
-            <div className="container-app">
-              <div className="filters">
+            <div className="search-panel">
+              {{#if attributesForFaceting}}
+              <div className="search-panel__filters">
                 {{#each attributesForFaceting}}
                 <RefinementList attribute="{{this}}" />
                 {{/each}}
               </div>
 
-              <div className="search-container">
-                <SearchBox className="searchBox" placeholder="{{searchPlaceholder}}" />
+              {{/if}}
+              <div className="search-panel__results">
+                <SearchBox className="searchbox" placeholder="{{searchPlaceholder}}" />
                 <Hits hitComponent={Hit} />
 
                 <div className="pagination">
diff --git a/templates/Vue InstantSearch/src/App.vue b/templates/Vue InstantSearch/src/App.vue
index bc8a9efb1..496270950 100644
--- a/templates/Vue InstantSearch/src/App.vue	
+++ b/templates/Vue InstantSearch/src/App.vue	
@@ -18,14 +18,16 @@
         api-key="{{apiKey}}"
         index-name="{{indexName}}"
       >
-        <div class="container-app">
-          <div class="filters">
+        <div class="search-panel">
+          {{#if attributesForFaceting.length}}
+          <div class="search-panel__filters">
             {{#each attributesForFaceting}}
             <ais-refinement-list attribute-name="{{this}}"></ais-refinement-list>
             {{/each}}
           </div>
 
-          <div class="search-container">
+          {{/if}}
+          <div class="search-panel__results">
             <ais-search-box
               placeholder="{{searchPlaceholder}}"
               class="ais-SearchBox-form"
@@ -122,13 +124,19 @@ em {
   padding: 1rem;
 }
 
-.container-app {
-  display: grid;
-  grid-template-columns: 20% 75%;
-  grid-gap: 5%;
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
 }
 
-.searchBox {
+.searchbox {
   margin-bottom: 2rem;
 }