Line between divs - html

Question

I want to draw a line between div, but can't figure out how to make <hr> take the length of the main div
Maybe there is some other solution?
I use react and semantic ui comments
create comment block:
const CommentWithReply: FunctionComponent<ICommentProps> = ({ author, createdAt, text, replies }) => (
<div className={styles.comment}>
<BasicComment createdAt={createdAt} text={text} author={author} />
<hr className={styles.hr}></hr>
<div className="comments">
{replies.map(e => (
<CommentWithReply
replies={e.comments}
author={e.author}
createdAt={e.createdAt}
text={e.text}
/>
))}
</div>
</div>
);
Basic comment
const BasicComment: FunctionComponent<IBasicCommentProps> = ({ createdAt, text, author }) => (
<div className={styles.commentInfo}>
<div className={styles.commentAuthor}>
<a href="/" className="avatar">
<img alt="avatar" src="https://i.imgur.com/LaWyPZF.png" />
</a>
<a href="/" className="author">
{author.lastName}
{' '}
{author.lastName}
</a>
<DividerSvg />
<div className="metadata">
<span className="date">{ moment(createdAt).fromNow() }</span>
</div>
</div>
<div className="content">
<div className="text">
{ text }
</div>
<div className="actions">
<DarkBorderButton className={styles.btnReplay} content="Reply" />
</div>
</div>
</div>
);
styles.scss
.comment {
margin-top: 1.25em;
border: 2px solid red;
box-sizing: border-box;
border-radius: 10px;
&:only-child {
&:last-child {
.hr {
visibility: visible;
display: flex;
width: 100%;
}
border: none;
}
}
&:last-child {
margin-bottom: -2em;
.hr {
display: none;
}
&:last-child {
}
}
}
main:
const CommentsFeed: FunctionComponent<ICommentProps> = ({ comments }) => (
<div className={styles.main}>
<p className={styles.commentCounter}> Discussion (58) </p>
<form className="ui reply form">
<div className="field">
<textarea placeholder="Add to the discussion..." />
</div>
<DarkBorderButton className={styles.buttonSend} content="Send" />
</form>
<div className="ui comments">
<div className="comment">
{comments.map(comment => (
<CommentWithReply
createdAt={comment.createdAt}
text={comment.text}
author={comment.author}
replies={comment.comments}
/>
))}
</div>
</div>
</div>
);