Adjust positioning of badges (#70)

diff --git a/_layouts/home.html b/_layouts/home.html
index f6f49ea..fe074f9 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -8,8 +8,15 @@
     <div class="container px-4 py-5 centered">
       <img src="{{ site.baseurl }}/img/arrow-inverse.png" style="max-width: 70%;"/>
       <p class="lead">A cross-language development platform for in-memory analytics</p>
-      <!-- Place this tag where you want the button to render. -->
-      <a class="github-button" href="https://github.com/apache/arrow" data-size="large" data-show-count="true" aria-label="Star apache/arrow on GitHub">Star</a> <a href="https://twitter.com/ApacheArrow?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @ApacheArrow</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+      <div class="social-badges">
+        <div class="social-badge">
+          <a class="github-button" href="https://github.com/apache/arrow" data-size="large" data-show-count="true" aria-label="Star apache/arrow on GitHub">Star</a>
+        </div>
+        <div class="social-badge">
+          <a href="https://twitter.com/ApacheArrow?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @ApacheArrow</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+        </div>
+      </div>
     </div>
   </div>
   <div class="container p-4 pt-5">
diff --git a/css/main.scss b/css/main.scss
index e844dfb..a4cdb90 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -97,3 +97,16 @@
 p a code {
   color: inherit;
 }
+
+.social-badges iframe {
+  vertical-align: middle;
+}
+
+.social-badges span {
+  vertical-align: top;
+}
+
+.social-badge {
+  display: inline;
+  padding: 12px;
+}