HTML buttons do not display properly next to list items - html

Question

I'm building the traditional todo list app in an effort to increase my understanding of Vuejs. Most of the functionality is working as expected, however my todo items are not displaying properly. Each item should have a "delete" button that shows up on the right side of its row, but the buttons are bleeding into the row below (see image).
What irks me is that the checkboxes are displaying properly, but the buttons are not. I've tried changing all the css for the buttons to that for the checkbox, but this didn't work
TodoItem.vue
<template lang="html">
<li class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<div class="checkbox-holder">
<input type="checkbox" v-on:change="markComplete(todo.id)" />
</div>
<h2>{{ todo.title }}</h2>
<button v-on:click="deleteTodo(todo.id)" class="del">x</button>
</li>
</template>
App.scss
.todos {
position: absolute;
display: block;
width: 656px;
background-color: white;
margin-left: 266px;
border-right: $generic-border;
min-height: calc(100vh);
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
padding-bottom: 80px;
#include mq("900px") {
margin-left: 0;
width: auto;
}
h2 {
font-size: 20px;
font-weight: normal;
}
&__list li {
line-height: 1.4;
color: #333;
font-size: 14px;
list-style-type: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
margin-top: 20px;
padding: 20px;
&.is-complete {
text-decoration: line-through;
}
button {
#include btn("30px");
float: right;
display: block;
}
.checkbox-holder {
margin-right: 20px;
margin-left: 20px;
align-items: center;
justify-content: center;
line-height: 16px;
float: left;
.checkbox {
cursor: pointer;
border-color: gray;
color: #343434;
height: 16px;
width: 16px;
border: 1px solid gray;
border-radius: 16px;
}
}
}
}
Here's how the buttons are displaying.

Answer 1

You can see the below code.
li {
display: flex;
align-items: center;
}
<ul>
<li class="todo-item">
<div class="checkbox-holder">
<input type="checkbox"/>
</div>
<h2>Hello world</h2>
<button>x</button>
</li>
</ul>