'Buttons same line

I want to put the three buttons in the same line. How should I do it with CSS?

The three buttons are: #search_keywords, #search_location and #search_submit.

`<form class="job_filters"> <?php do_action( 'job_manager_job_filters_start', $atts ); ?>

<div class="search_jobs">
    <?php do_action( 'job_manager_job_filters_search_jobs_start', $atts ); ?>

    <div class="search_keywords">
        <label for="search_keywords"><?php esc_html_e( 'Keywords', 'wp-job-manager' ); ?></label>
        <input type="text" name="search_keywords" id="search_keywords" placeholder="<?php esc_attr_e( 'Keywords', 'wp-job-manager' ); ?>" value="<?php echo esc_attr( $keywords ); ?>" />
    </div>

    <div class="search_location">
        <label for="search_location"><?php esc_html_e( 'Location', 'wp-job-manager' ); ?></label>
        <input type="text" name="search_location" id="search_location" placeholder="<?php esc_attr_e( 'Location', 'wp-job-manager' ); ?>" value="<?php echo esc_attr( $location ); ?>" />
    </div>

    <div style="clear: both"></div>

    <?php if ( $categories ) : ?>
        <?php foreach ( $categories as $category ) : ?>
            <input type="hidden" name="search_categories[]" value="<?php echo esc_attr( sanitize_title( $category ) ); ?>" />
        <?php endforeach; ?>
    <?php elseif ( $show_categories && ! is_tax( 'job_listing_category' ) && get_terms( [ 'taxonomy' => 'job_listing_category' ] ) ) : ?>
        <div class="search_categories">
            <label for="search_categories"><?php esc_html_e( 'Category', 'wp-job-manager' ); ?></label>
            <?php if ( $show_category_multiselect ) : ?>
                <?php job_manager_dropdown_categories( [ 'taxonomy' => 'job_listing_category', 'hierarchical' => 1, 'name' => 'search_categories', 'orderby' => 'name', 'selected' => $selected_category, 'hide_empty' => true ] ); ?>
            <?php else : ?>
                <?php job_manager_dropdown_categories( [ 'taxonomy' => 'job_listing_category', 'hierarchical' => 1, 'show_option_all' => __( 'Any category', 'wp-job-manager' ), 'name' => 'search_categories', 'orderby' => 'name', 'selected' => $selected_category, 'multiple' => false, 'hide_empty' => true ] ); ?>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    <?php
    /**
     * Show the submit button on the job filters form.
     *
     * @since 1.33.0
     *
     * @param bool $show_submit_button Whether to show the button. Defaults to true.
     * @return bool
     */
    if ( apply_filters( 'job_manager_job_filters_show_submit_button', true ) ) :
    ?>
        <div class="search_submit">
            <input type="submit" value="<?php esc_attr_e( 'Search Jobs', 'wp-job-manager' ); ?>">
        </div>
    <?php endif; ?>

    <?php do_action( 'job_manager_job_filters_search_jobs_end', $atts ); ?>
</div>

<?php do_action( 'job_manager_job_filters_end', $atts ); ?>

`

I tried inline-block, etc. but i'm not reaching what I really want.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source