UI Alignment | WordPress.org

Hi,

I would like to align “Show details” with the corresponding rewards. Please refer to the attached image. How can I accomplish this?

https://drive.google.com/file/d/1WO1rQehj0xKfceo-9h4X4vMKeV9Vn921/view?usp=sharing

The inspect code shows the following css. What can I do to modify it so that “Show details” comes in line with it’s corresponding badge title, and still show it’s content below the badge when clicked on “show details”.

<div class="gamipress-achievement-description">

                    <h2 class="gamipress-achievement-title">

                                    <a href="https://staging66.courses.jkyog.org/badges/elite/" title="Elite">Elite</a>
                
            </h2>

            
        
        
            
            
        
                    <div class="gamipress-achievement-excerpt">
                            </div><!-- .gamipress-achievement-excerpt -->

                    
        
            
            
        
        
                    <div class="gamipress-achievement-attached">

                
                    <div id="show-more-30272" class="gamipress-open-close-switch">
                        <a class="show-hide-open" data-achievement-id="30272" data-action="open" data-open-text="Show Details" data-close-text="Hide Details" href="#">Show Details</a>
                    </div>

                    <div id="gamipress-toggle-more-window-30272" class="gamipress-extras-window" style="display: none;">
                        <h4 class="gamipress-achievement-steps-heading">1 Step</h4><ul class="gamipress-achievement-steps gamipress-required-achievements"><li class="user-has-not-earned">Complete a course 10 times</li></ul><!-- .gamipress-required-achievements -->                    </div><!-- .gamipress-extras-window -->

                
            </div><!-- .gamipress-achievement-attached -->

            
        
        
        
        
        
    </div>

The page I need help with: [log in to see the link]