Align two buttons (one of them in a form) in a table cell in Bootstrap 4 - css

Question

I'm using Bootstrap 4 and I want to align two buttons inside a table column. The buttons are of the same size, but the second one is inside of a form.
I tried using the button group approach which almost solves the situation, but unfortunately there's a small gap between the buttons:
<td class="text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</td>
What utility class can I use or any additional css in order to have the buttons aligned on the same level?
P.S. It doesn't have to be the button group, it can be any other technique as long as the buttons are on the same line.

Answer 1

Following the same strategy used to align columns in the bootstrap, its td can be of the row class, surrounded by items in the class col-md , col-lg, col-sm.
Try this:
HTML
<td class="text-right row">
<div class="btn-group" role="group">
<div class="col-md-6 custom">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
</div>
<div class="col-md-6 custom">
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</div>
</td>
Customize your column with a custom CSS
CSS
.custom {
padding-right: 5px;
padding-left: 5px;
}
https://jsfiddle.net/braulioti/aq9Laaew/160600/