JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<ul>
<li>
<div class="item">
<input type="checkbox">
Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
2nd Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
3rd Title
<button class="destory-button">Destroy</button>
</div>
</li>
</ul>
</div>
CSS
.container {
width: 300px;
background: grey;
}
ul, li {
list-style: none;
padding: 0px;
}
.item {
display: flex;
align-items: center;
}
.destory-button {
background:red;
justify-content: flex-end;
}