CSS float inside the list avoid unwanted padding - html

Question

In my list element I want to place the control buttons aside, from the left of the list item text. In order to do that I use a property float: left;, it does the job, but when there are more than one line in a list, every new line has a padding of a size of the previous floating block:
The list is based on Vue.js & Bootstrap.
My CSS/HTML code:
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in">
<span>
{{item.properties.NAME}}
</span>
<span style="float: left;">
<span class="fa fa-wrench"></span>Update
<span class="fa fa-trash-o"></span>Delete
</span>
</li>
</transition-group>
</ul>
How to display buttons inside the list on the right/left side of the list just one under the other?
The final result should be something like that:
Item #1_____________________________________Update___Delete
Item #2_____________________________________Update___Delete

Answer 1

Your issue should be solved by resetting or clearing the float that you’ve created. As you’re using bootstrap you can simply add the class clearfix to your li element that you have added float to. This will add a pseudo after element which will reset the flat after the element.
The final code snippet:
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in" style="padding-bottom:10px;" clearfix>
{{item.properties.NAME}}
<span style="float: left;">
<span class="fa fa-wrench"></span>עדכן
<span class="fa fa-trash-o"></span>מחק
</span>
</li>
</transition-group>
</ul>

Answer 2

Try style="clear:left;". If that doesn't work, you would actually do the float or the clear left on the 'li' element, not on the span containing the buttons. This way each 'li' containing the buttons will contain the buttons themselves.
Try something to this affect below. Since there is not a JS Fiddle, editing code for what your needs are harder to edit.
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in" style="float:left; clear:left; width:100%; display:block">
<span>
{{item.properties.NAME}}
</span>
<span>
<a href="#" class="btn btn-success btn-xs" #click="edit_item(item)">
<span class="fa fa-wrench"></span>Update</a>
<span class="fa fa-trash-o"></span>Delete
</span>
</li>
</transition-group>
</ul>
Kind of like this. Quick and dirty. Except on the elements, instead of inline styling, highly recommend CSS.
https://jsfiddle.net/y1x53zx2/1/