diff --git a/examples/side-by-side.css b/examples/side-by-side.css
index aabe991891..e053bcdc7d 100644
--- a/examples/side-by-side.css
+++ b/examples/side-by-side.css
@@ -1,4 +1,7 @@
 @media (min-width: 800px) {
+  .wrapper {
+    display: flex;
+  }
   .half {
     padding: 0 10px;
     width: 50%;
diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index 73b6ce7fa4..f5605cf404 100644
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -9,11 +9,13 @@ cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
     value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
-<div class="half">
-  <h4>Road</h4>
-  <div id="roadMap" class="map"></div>
-</div>
-<div class="half">
-  <h4>Aerial</h4>
-  <div id="aerialMap" class="map"></div>
+<div class="wrapper">
+  <div class="half">
+    <h4>Road</h4>
+    <div id="roadMap" class="map"></div>
+  </div>
+  <div class="half">
+    <h4>Aerial</h4>
+    <div id="aerialMap" class="map"></div>
+  </div>
 </div>