btn out of g-list-inline

For a better design:

<div class="es-card__meta">
<ol class="g-list-inline g-list-inline--delimited">
<li class="pull-right">
<a class="btn btn-es-default-o btn-sm" href="javascript:void(0);" data-es-groups-leave="" data-id="2">
Leave this Group</a>
</li>
</ol>
</div>

Better this way:

<div class="es-card__meta">
<ol class="g-list-inline g-list-inline--delimited">
</ol>
</div>

<li class="pull-right">
<a class="btn btn-es-default-o btn-sm" href="javascript:void(0);" data-es-groups-leave="" data-id="2">
Leave this Group</a>
</li>

The code is not complete. Sorry, it's just in a hurry

But for a better look it would be better to put the btn-es-default-o parallel to "g-list-inline g-list-inline--delimited". This is the list view and the button is not well placeable. Therefore, something emerges as in the photo.