diff --git a/doc/source/_static/css/getting_started.css b/doc/source/_static/css/getting_started.css
index bb24761cdb159..69c57b52dfa4a 100644
--- a/doc/source/_static/css/getting_started.css
+++ b/doc/source/_static/css/getting_started.css
@@ -132,6 +132,8 @@ ul.task-bullet > li > p:first-child {
 /* Getting started index page */
 
 .intro-card {
+  display: flex;
+  flex-direction: column;
   background:#FFF;
   border-radius:0;
   padding: 30px 10px 10px 10px;
@@ -179,7 +181,8 @@ ul.task-bullet > li > p:first-child {
   font-size: 0.9rem;
   border-radius: 0.5rem;
   max-width: 120px;
-  padding: 0.5rem 0rem;
+  align-self: flex-end;
+  margin-bottom: 30px;
 }
 
 .custom-button a {
diff --git a/doc/source/index.rst.template b/doc/source/index.rst.template
index c6deb4b7ea383..3f6d8fc3ec948 100644
--- a/doc/source/index.rst.template
+++ b/doc/source/index.rst.template
@@ -34,6 +34,7 @@ programming language.
                     <h5 class="card-title">Getting started</h5>
                     <p class="card-text">New to <em>pandas</em>? Check out the getting started guides. They
                     contain an introduction to <em>pandas'</em> main concepts and links to additional tutorials.</p>
+                </div>
 
 .. container:: custom-button
 
@@ -42,7 +43,6 @@ programming language.
 .. raw:: html
 
                 </div>
-                </div>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex">
                 <div class="card text-center intro-card shadow">
@@ -51,6 +51,7 @@ programming language.
                     <h5 class="card-title">User guide</h5>
                     <p class="card-text">The user guide provides in-depth information on the
                     key concepts of pandas with useful background information and explanation.</p>
+                </div>
 
 .. container:: custom-button
 
@@ -59,7 +60,6 @@ programming language.
 .. raw:: html
 
                 </div>
-                </div>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex">
                 <div class="card text-center intro-card shadow">
@@ -69,6 +69,7 @@ programming language.
                     <p class="card-text">The reference guide contains a detailed description of
                     the pandas API. The reference describes how the methods work and which parameters can
                     be used. It assumes that you have an understanding of the key concepts.</p>
+                </div>
 
 .. container:: custom-button
 
@@ -77,7 +78,6 @@ programming language.
 .. raw:: html
 
                 </div>
-                </div>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex">
                 <div class="card text-center intro-card shadow">
@@ -87,6 +87,7 @@ programming language.
                     <p class="card-text">Saw a typo in the documentation? Want to improve
                     existing functionalities? The contributing guidelines will guide
                     you through the process of improving pandas.</p>
+                </div>
 
 .. container:: custom-button
 
@@ -95,7 +96,6 @@ programming language.
 .. raw:: html
 
                 </div>
-                </div>
             </div>
         </div>
     </div>