CSS: can't move the buttons-CodePudding

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

....................................................................................

CodePudding user response：

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>

and on the task class insert this:

.task {
 display:flex;
 align-items: center;
 justify-content: space-between;
}

CodePudding user response：

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

CodePudding user response：

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;
}