I am in the process of creating a platform for users to engage with topics by viewing, posting, and responding. The issue I am currently facing is related to positioning elements within the forum setup. Specifically, I am encountering difficulties with aligning the "p" tag to the right of the user who posted their reply, similar to how the reply field at the bottom behaves.
I have experimented with duplicating the reply section and stacking them on top of each other, which seems to work well. However, when I switch the textarea tag to a p tag, the alignment gets disrupted.
It's worth noting that these posts will eventually be converted into actual posts using PHP; this is just part of the testing phase.
Thank you for your help!
Here is the HTML code:
<div class=forumListWrap>
<div class="col-1-forum">
<h2>TITLE</h2><!--TITLE-->
<button type="button" class="forumBtn">Add a Reply</button>
<div class="topic">
<h6>Topic</h6>
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3><a href="profile.html">View Profile</a></h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM</p>
</div>
</div>
</div>
</div>
<div class="reply">
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3><a href="profile.html">View Profile</a></h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM LOREM</p>
</div>
</div>
</div>
</div>
<div id="horiLine"></div>
<div class="col-2-reply">
<h2>Reply to thread</h2>
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
</div>
</div>
<div class="col-3-reply">
<div class="answerField">
<textarea></textarea>
</div>
<input id="replySubmit" type="submit" value="Submit">
</div>
</div>
</div>