JSFiddle - React, Tailwind, and code Playground
HTML
<article id="post-843">
<div class="entry-content">
<div class="stream-wrap">
<div class="stream-left">NAME 1</div>
<div class="stream-right">
<div class="stream-content">Original Content</div>
<div class="stream-footer"><a class="this-reply" href="#">REPLY</a>
</div>
</div>
<!-- stream-right -->
<div style="clear:both"></div>
<div class="single-f3ed-reply">
<div class="stream-reply-box">
<div class="stream-left">YOUR NAME</div>
<div class="stream-right">
<div id="respond-843">
<textarea rows="4" cols="40" placeholder="Type your reply here"></textarea>
</div>
</div>
<!-- stream right -->
</div>
<!-- stream reply box -->
<div style="clear:both;"></div>
</div>
<!--single-f3ed-reply-->
<div class="f3ed-reply">
<div id="comments-843">
<li class="comment byuser" id="comment-208">
<div id="div-comment-208" class="comment-body">
<div class="f3ed-reply-wrap">
<div class="stream-left">NAME 2</div>
<div class="stream-right">This is a reply to the original post!</div>
<!--stream-right-->
</div>
<!--stream-left-->
<div style="clear:both"></div>
<!--f3ed-reply-wrap-->
</div>
<!--div-comment-208-->
</li>
<!-- #comment-## -->
</div>
<!--comments-843-->
</div>
...
CSS
.stream-wrap {
width:500px;
}
.stream-left {
float:left;
width:100px;
}
.stream-right {
float:left;
width:300px;
}
.single-f3ed-reply {
margin-top:10px;
background:#ccc
}
.f3ed-reply {
margin-top:10px;
background:yellow
}