align multiple sticky elements along a parent container - html

Question

I would like to create an alignment along a div container with the following structure. There are 3 buttons and one span element but this could be replaced with other elements if needed.
I started creating this
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
and tried to add float: right to the buttons on the right side but they didn't stick to the right side.
How can I achieve it? (A solution using display: grid would be fine too)

Answer 1

I have edited your code and here is what you expected , please have a look
I have used position style to make it right aligned by placing two button in one div<div class="pushRight"> and added styles for that div
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
position: relative;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.pushRight{
position: absolute;
right:0
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>

Answer 2

We can achieve this using float, check the sample code.
Here added floating instead display:flex
For right alignment added a class
.pull-right{
float:right;
}
and it will be called in
<button class="btnTodoAction pull-right">D</button>
<button class="btnTodoAction pull-right">E</button>