Bootstrap 4 Right justifiy Button group inside list group - css

Question

I created a list group that display a text variant name and its price, then e group button to edit it. what i want is price and button should be right-justified, but in my current work it seems messed up. here is my single item of list-item. Full snippet is here https://jsfiddle.net/matiusnugroho/uev7wz5t/4/
<li class="list-group-item px-0" style="padding: 0px;">
<span>
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 03 is another variant</a>
<span class="float-right">341000</span>
<span class="float-right">
<div class="btn btn-group">
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</span>
</span>
<div
class="collapse" id="collapseExample11" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>Variant 03</td>
</tr>
<tr>
<td>Description</td>
<td>just it</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
how to put the price and button group properly?

Answer 1

Try to remove the floating class to align right side. When we use float-right will affect the other div alignment.
For spacing and button use the bootstrap default components.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.list-group .card {
border: 0;
border-top: 1px solid #ddd;
border-radius: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<div class="card-header"><strong class="card-title">Variants</strong></div>
<div class="card-body">
<div class="col-12">
<ul class="list-group">
<li class="list-group-item p-0 collapsed">
<div class="d-flex">
<a class="btn btn-link" data-toggle="collapse" href="#collapseExample10" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 02</a>
<div class="ml-auto my-1 mr-1">
<span class="price">12000</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample10" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>V02</td>
</tr>
<tr>
<td>Description</td>
<td>A description</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
<li class="list-group-item p-0">
<div class="d-flex">
<a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 03 is another variant</a>
<div class="ml-auto my-1 mr-1">
<span class="price">341000</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample11" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>Variant 03</td>
</tr>
<tr>
<td>Description</td>
<td>just it</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
<li class="list-group-item p-0">
<div class="d-flex">
<a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample12" role="button" aria-expanded="false" aria-controls="collapseExample1">Yet Another Varian</a>
<div class="ml-auto my-1 mr-1">
<span class="price">121212</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample12">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>v34</td>
</tr>
<tr>
<td>Description</td>
<td>afrvrefr rre</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 mt-2 text-right">
<button type="button" class="btn btn-default">Add Varian</button>
</div>
</div>
</div>