react component implementing a custom sliding notification

I am writing a SimpleNotification component that will slide into view when show() is called and slide out when dismiss() is called.

Currently, I have two problems.

First I want the message and the cross button on the same line, even when the message overflows. And the cross button should always be on the right of the message. And the cross button should be round and have its content centered.

The second problem is I don't know how to add sliding animation (is this transition animation?) when show() or dismiss() is called. So now I temporarily use a bool visible to control its visibility instead of letting it slide in and out.

How can I achieve what I want? Thanks in advance!

I am new to front end and below in my current attempt.

class SimpleNotification extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false
        }
        this.style = {
            card: {
                width: "fit-content",
                minWidth: "300px",
                padding: "10px",
                boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                float: "right",
            },
            cross: {
                display: "inline",
                margin: "10px",
                backgroundColor: "#D3D3D3",
                borderRadius: "50%",
                width: "22px",
                height: "22px",
                textAlign: "center"
            },
            message: {
                display: "inline",
                margin: "10px",
                width: "80%",
                wordWrap: "break-word",
            },
            transition: {
                transition: "all 0.5s linear"
            },
        }
        // Replace existing notification
        this.call_stack = []
    }

    show(message = "", duration = 2000){
        // transition: width 2s, height 4s;
        this.call_stack.push({message: message, duration: duration})
        let count = this.call_stack.length
        this.setState({visible: true, message})
        setTimeout(() => {
            if (this.call_stack.length == count)
                this.dismiss()
            this.call_stack.splice(count - 1, 1)
        }, 10000000)
    }

    dismiss(){
        this.setState({visible: false})
    }

    render() {
      const {visible, message} = this.state
      return visible ? <div id={this.props.id} style={this.style.card}>
          <p style={this.style.message}>{message}</p>
          <p style={this.style.cross} onClick={this.dismiss.bind(this)}>×</p>
      </div> : null
    }
  }