Positioning list-group-item buttons - html

Question

I am trying to create this list-group-item example below with two buttons (instead of just one) that should pull to right and also be of equal height to the list-group-item itself:
At the moment I do have the skeleton working, but as you can see they are not positioning correctly.
Thanks.
li.group-btn {
padding: 0;
border-radius: 0;
}
.form-control,
.btn {
border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<div class="input-group">
<span class="pull-right">
<button class="btn btn-default" type="button">Go!</button>
</span>
<span class="pull-right">
<button class="btn btn-default" type="button">Go!</button>
</span>
<span class="left">Cras justo odio</span>
</div>
<!-- /input-group -->
</li>
</ul>
</div>

Answer 1

You can use i.e display: table; / display: table-cell;
li.group-btn {
padding: 0;
border-radius: 0;
}
.form-control,
.btn {
border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<div class="input-group" style="display:table; width:100%;">
<span style="display: table-cell; border:1px solid #ccc; padding: 0 8px; vertical-align: middle;">Cras justo odio</span>
<span style="display: table-cell; width: 40px;">
<button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button>
</span>
<span style="display: table-cell; width: 40px;">
<button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button>
</span>
</div>
<!-- /input-group -->
</li>
</ul>
</div>