Two forms submit button stay beside each other

<form class="listing_form" action="{% url 'listing' listing.id  %}" method="post">
            {% csrf_token %}
            {{ form }}
            <input class="btn btn-primary" type="submit" value="Place Bid">
</form>
<form class="listing_form_close" action="{% url 'close' listing.id %}" method="post">
            {% csrf_token %}
            {% if listing.listedBy.username == request.user.username %}
            <input class="btn btn-danger" type="submit" value="Close Bid">
            {% endif %}
</form>

In this code, two submit buttons are stays vertically.

I need styling same below:

As I have tried:

.listing_form [type="submit"] {
    margin-bottom: 20px;
    display: inline;
  }
  .listing_form_close [type="submit"] {
    display: inline;
  }

In my css code, but not works!

Appreciated.

>Solution :

The problem in your CSS code is, that you add display: inline to the input element, which is inside a form element. In this case, all buttons of the type submit inside a form would be inline.

What you actually want to do is to add the display: inline attribute to your form. So that the two forms which including the buttons are next to each other.

.listing_form {
  display: inline;
}

<form class="listing_form" action="URL" method="post">
  <input class="btn btn-primary" type="submit" value="Place Bid">
</form>
<form class="listing_form" action="URL" method="post">
  <input class="btn btn-danger" type="submit" value="Close Bid">
</form>

Note: I changed the form class of the second form from listing_form_close to listing_form.