How to correctly align comment using semantic UI in React JS?

Question

To generate comment component using Semantic UI, I wrote the following code :

import React from 'react'
import ReactDOM from 'react-dom'

const  App = () => {
    return (
        <div className = "ui container comment">
            <div className = "comment"> 
                <a href = "/" className = "avatar"> 
                    <img alt = "avatar" />
                </a>
                <div className = "content">
                    <a href = "/" className = "author"> Pratik </a>
                    <div className = "metadata">
                        <span className = "date"> Today at 6:00PM</span>
                    </div>
                    <div className = "text">This is a nice blog 
                    </div>
                </div>
            </div>
        </div>
    );
 };

 ReactDOM.render(<App />, document.querySelector('#root'))

The output which I get is like this :

The output structure which I require is like this....parallely :

What is the issue ? And how can I resolve this ?

Answer 1

No that's not it. After seeing the code for a long time, I found the error . It was on the code line:

<div className = "ui container comment">

Instead of "ui container comment" , it should be "ui container comments". I missed that completely as I am new to React JS.