How to align buttons properly [closed]

first things first lets improve your code:

function action_after_question_content() {
    if (!is_single()) {
        echo "<a class="button-default" href="".esc_url( get_the_permalink() )."#comments">See Answers</a>";
        echo "<a class="meta-answer" href="".esc_url( get_the_permalink() )."#respond">Give Answer</a>";
    }
}

Note: We can improve further by getting the numbers of comments, and based on that build the buttons: Ex: If we have a plural numbers of comments we will use “See Answers”, if we have one, we will use “See Answer”, If we have none, we can display something like “Be the first who answers!”

This will look like:

function action_after_question_content() {
    if (!is_single()) {
        $num_comments = get_comments_number();
        if ( $num_comments ) :
            echo '<a class="button-default btn-puzzle-align" href="' . esc_url( get_the_permalink() ) . '#comments">' . _n( 'See Answer', 'See Answers', $num_comments, 'textdomain' ) . '</a>';
            echo '<a class="meta-answer btn-puzzle-align" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Give Answer', 'textdomain' ) . '</a>';
        else :
            echo '<a class="meta-answer btn-puzzle-align" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Be the first to answer!', 'textdomain' ) . '</a>';
        endif;
    }
}

Where in CSS should look like:

.btn-puzzle-align {
   margin-bottom: 2.5rem;
}

This is just a guessing, the margin-bot could not work but could work depending on the others elements CSS. The code is also untested. Note that you need to change the textdomain to the theme textdomain, and the 2.5rem to what you might need.

Edit:

Also, after writing this, a more good way of doing this is maybe to wrap the buttons in another element:

function action_after_question_content() {
    if (!is_single()) {
        $num_comments = get_comments_number();
        echo '<div class="btn-puzzle-align">';
            if ( $num_comments ) :
                echo '<a class="ap-see" href="' . esc_url( get_the_permalink() ) . '#comments">' . _n( 'See Answer', 'See Answers', $num_comments, 'textdomain' ) . '</a>';
                echo '<a class="ap-give" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Give Answer', 'textdomain' ) . '</a>';
            else :
                echo '<a class="ap-see" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Be the first to answer!', 'textdomain' ) . '</a>';
            endif;
        echo '</div>';
    }
}

And use the padding, which will usually work.

.btn-puzzle-align {
   display: flex;
   justify-content: space-evenly;
   padding-bottom: 2.5rem;
}
.btn-puzzle-align > .ap-see, .btn-puzzle-align > .ap-give{
    float:none;
}