Figure out badge widths dynamically

assets/sass/components/_badges.sass

@@ -2,4 +2,14 @@
     margin: 0 auto 10px
 
 .badges img
+    height: auto
     max-width: 100%
+
+.acquia-badges
+    border-collapse: collapse
+    display: table
+
+    .badge
+        background: none
+        display: table-cell
+        padding: 0

source/_includes/badges.html.twig

@@ -7,19 +7,21 @@
         />
     </a>
 
-    <div class="is-flex align-items-center">
+    <div class="acquia-badges">
+        <div class="badge">
             <img
                 src="{{ site.images_url }}/assets/images/badges/acquia-d8-developer.png"
                 alt="Acquia Certified Developer - Drupal 8 Exam Badge"
-            class="is-2"
             />
+        </div>
 
+        <div class="badge">
             <img
                 src="{{ site.images_url }}/assets/images/badges/acquia-d8-back-end.png"
                 alt="Acquia Certified Back End Specialist - Drupal 8 Exam Badge"
-            class="is-2"
             />
         </div>
+    </div>
 
     <a href="http://conference.phpnw.org.uk/phpnw17" class="is-block">
         <img src="{{ site.images_url }}/assets/images/badges/phpnw17.png" alt="">