How to force two buttons into one line - html

Question

Below you see the cell where the buttons (bootstrap 4) are. The other cells were not printed. The EDIT and DELETE button are one over the other (2 lines). How to force them to the same line?
<div class="container">
<table class="table table-striped">
..deleted...
<tbody>
..deleted...
<tr>
<div>
<form method="GET">
{% csrf_token %}
<button class="btn btn-outline-secondary btn-sm" type="submit" name="edit"
value={{objekt.id}}>Edit</button>
</form>
<div id="colwrap">
<form method="POST">
{% csrf_token %}
<button class="btn btn-outline-secondary btn-sm" type="submit" name="delete"
value={{objekt.id}}>Delete</button>
</form>
</div>
</div>
</tr>
</tbody>
</table>
</div class="container">

Answer 1

I finally found an answer (https://www.w3schools.com/howto/howto_css_button_group.asp) (with additional CSS).
In the html:
<div class="btn-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
In the CSS (in my case in APPfolder/static/app.css):
.btn-group button {
background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}