It seems like the issue is arising from using display: flex in the parent element, which is causing problems with the float property. There are a couple of ways you can resolve this problem.
Option 1 - Removing Flex:
To address this issue, you can remove the display: flex from the parent element and instead use the float-right class along with the text-muted class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<th class="card-header" colspan="2"></th>
</tr>
<tr colspan="2">
<td>
<strong>Username:</strong> A Comment
<small class="form-text text-muted float-right">5 mins ago</small>
<br/>
</td>
</tr>
</tbody>
</table>
Option 2 - Using Flex:
If you prefer to keep the display: flex property, you can utilize justify-content: space-between along with some minor adjustments to the HTML structure.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<th class="card-header" colspan="2"></th>
</tr>
<tr colspan="2">
<td class="d-flex justify-content-between">
<div>
<strong>Username:</strong> A Comment
</div>
<small class="form-text text-muted">5 mins ago</small>
</td>
</tr>
</tbody>
</table>