repositioning elements relative to the element in which they reside

[TechnoDiver]

CSS in one of my nightmares, it is the one thing that causes me the most frustration. I have a question for those who are a bit more graceful with it than I am -

I have a comment area in a practice project, it looks like this ->

<div class="comment-content d-flex">
    
    <div class="comment-author">
        <img src="img.jpg" alt="author">
    </div>
    
    <div class="comment-meta">
        <a href="#" class="post-author">Commenter Name</a>
        <a href="#" class="post-date">Comment date</a>
        <p>Donec turpis erat, scelerisque id euismod sit amet, fermentum vel dolor. Nulla facilisi. Sed pellen tesque lectus et</p>
    </div>

<!-- I added this area myself
	<div class='d-flex align-items-center'>
        <a href='#' class='comment-like'><span><i class="fa fa-thumbs-up"></i> like</span></a>&nbsp;&nbsp;
        <a href='#' class='comment-respond'><span><i class="fa fa-comment"></i> respond</span></a>
    </div>
-->
    
</div>

in the area that I commented that I added myself .comment-like and .comment-respond are not yet defined. At the moment it flows to the right of the comment area and I want them below it. Easy enough to do with positioning except that I need it to be positioned relative to the content of the comment that it belongs to. This whole block will eventually be echoed from a PHP class but I like to get the styling and html correct on the page it will display on first (probably like most people).

Can I get some advice on the best way to resolve this issue from you folks please. TIA

[requinix]

If you want the new DIV to be below the .comment-meta then (1) give that new element a class like how the others have classes, then (2) since you're using flex, apparently, tell CSS that you want the .comment-meta to take up the whole line it's on and the buttons will be forced onto the next one.

[TechnoDiver]

1 hour ago, requinix said:

tell CSS that you want the .comment-meta to take up the whole line it's on and the buttons will be forced onto the next one.

I tried this with bootstrap cols actually and didn't work. It's from a template and I wasn't familiar with flex. I'm reading about it now, thanks