HTML inline forms with buttons - html

Question

Here is my HTML code:
<div class="text-right">
<form method="post" action="create_car_type.html">
<button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
Create a type
</button>
</form>
<form method="post" action="delete_car_type.html">
<button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
Delete a type
</button>
</form>
</div>
These two buttons are inside forms, which are inside a div. They are right aligned in this div, but I would like to display them inline. The way they are displayed currently is that one places above the other, which is something I want to avoid. Should I include something like display: inline somewhere? Where should this go?

Answer 1

add style="display: inline-block;" to form tags
<div class="text-right">
<form method="post" action="create_car_type.html" style="display: inline-block;">
<button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
Create a type
</button>
</form>
<form method="post" action="delete_car_type.html" style="display: inline-block;">
<button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
Delete a type
</button>
</form>
</div>

Answer 2

you can use a display: flex or display: inline-flex to your main div tag and this is the most easy way to make something inline. something like this
.text-right{
display: flex;
gap: 10px; /*also you can use gap to give a space between them*/
}
<div class="text-right">
<form method="post" action="create_car_type.html">
<button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
Create a type
</button>
</form>
<form method="post" action="delete_car_type.html">
<button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
Delete a type
</button>
</form>
</div>