Ive been reading the documents and trying to find out if other people had the same questions. But i werent able to find any. Is there any way I can add space between the buttons? Right now they are right next to each other. Thanks!

import React from react;

import { connect } from react-redux;



class Todo extends React.Component {



    state = {

        color:null

    }



    render() {



        let color;

        if(this.props.todo.priorityLevel === 3 ) {

             color = #ff5252 red accent-2;

        } else if(this.props.todo.priorityLevel === 2) {

            color =  #ff8a65 deep-orange lighten-2;

        } else {

            color = #fff176 yellow lighten-2;

        }



        return(

            <div className={card-panel  + color}>

                <div id=todoInfo>

                    <h2>{`Title: ${this.props.todo.todoTitle}`}</h2>

                    <span id=todoDescription>{`Description: ${this.props.todo.description}`}</span>

                    <span id=todoPriorityLevel>{`Priority Level: ${this.props.todo.priorityLevel}`}</span>

                </div>

                <div id=todoActions>

                    <button className=btn-floating btn-large cyan pulse actionButtons onClick={()=>this.props.dispatch({type:EDIT_TODO, id: this.props.todo.id})}>Edit</button>

                    <button className=btn waves-effect #d50000 red accent-4 pulse actionButtons onClick={()=>this.props.dispatch({type:DELETE_TODO, id: this.props.todo.id})}>Delete</button>

                </div>

            </div>



        )

    }

}



export default connect()(Todo);