CSS: can't move the buttons - css

Question

I'm designing a To Do List, and because I'm new to this type of coding I'm struggling with the CSS, I'm trying to put the 2 buttons on the right but they are staying next to the task text.
* {
font-family: Arial, Helvetica, sans-serif;
}
.App {
display: block;
text-align: center;
align-items: center;
}
.App input {
margin-bottom: 10px;
height: 20px;
}
.done {
text-decoration: line-through;
color:rgb(118, 118, 118)
}
.task {
align-items: center;
display: flex;
margin: auto;
width: 50%;
padding: 10px;
border: 1px solid green;
}
.task .task-text {
font-size: 20px;
}
.task .task-btn {
cursor: pointer;
}
.task .delete {
color: red;
}
.task .check {
color: green;
}
import React, { Component } from "react";
class Task extends Component {
render() {
return (
<div className={`task ${this.getClass()}`}>
<div className="task-text">{this.props.task.text}</div>
<span
className="task-btn check material-symbols-outlined"
onClick={() => this.props.onDone(this.props.task.id)}
>
check_box
</span>
<span
className="task-btn delete material-symbols-outlined"
onClick={() => this.props.onDelete(this.props.task.id)}
>
delete
</span>
</div>
);
}
getClass() {
return this.props.task.isDone ? "done" : "notDone";
}
}
export default Task;
What can I add to do what I want? The Output
....................................................................................

Answer 1

Wrap your 2 buttons with single div:
<div className="btns-parent">
<span
className="task-btn check material-symbols-outlined"
onClick={() => this.props.onDone(this.props.task.id)}
>
check_box
</span>
<span
className="task-btn delete material-symbols-outlined"
onClick={() => this.props.onDelete(this.props.task.id)}
>
delete
</span>
</div>
Then, on the task class, insert this:
.task {
display:flex;
align-items: center;
justify-content: space-between;
}

Answer 2

Simply modify your css .task{} as follows:
.task {
align-items: center;
display: flex;
justify-content: space-between;
margin: auto;
width: 50%;
padding: 10px;
border: 1px solid green;
}

Answer 3

add flex: 1 to
.task .task-text { font-size: 20px; }