JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div id="comments">
    <div class="comment-create-container">
        <textarea></textarea>
    </div>
    <div class="comments-wrapper">
        <ul class="comment-parent-container">
            <li class="comment parent cf">
                <div class="img">
                    <img src="http://placekitten.com/100/100" alt="">
                </div>
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.</div>
            </li>
        </ul>
        <ul class="comment-parent-container">
            <li class="comment parent cf">
                <div class="img">
                    <img src="http://placekitten.com/100/100" alt="">
                </div>
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.
                    <ul class="commenta-meta">
                        <li>Reply</li>
                        <li>Like</li>
                        <li>4 hours ago</li>
                    </ul>
                </div>
            </li>
            <li class="comment child cf">
                <div class="img">
                    <img src="http://placekitten.com/100/100" alt="">
                </div>
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.</div>
            </li>
        </ul>
    </div>
</div>

SCSS

#comments {
    padding: 10px;
    
    textarea {
        width: 100%;
    }
}
.comment-create-container {
    padding: 10px;
    border: 1px solid #ccc;
}

.comments-wrapper {
    .comment-parent-container {
        list-style: none;
        border: 1px solid #ccc;
        background: whiteSmoke;
        padding: 5px;
        .comment {
            padding: 10px;
        
            &.child {
                margin-left: 60px;
            }
            
            .img {
                float:left;
                margin:0 5px 0 0;  
        
                img {
                    display:block;
                }
            }
            .content {
                display:table-cell; /* 1 */
                width:10000px; /* 2 */
                *width:auto; /* 3 */
                *zoom:1; /* 4 */
                
                .commenta-meta {
                    padding: 0;
                    margin-top: 10px;
                }
                
                li {
                    display: inline-block;
                    
                    &:before {
                  content: "-";
                  padding: 0 5px;
                        }
                        &:first-child:before {
                            content: "";
                            padding: 0;
                        }
                }
            }
        }
    }
}


.icon {
    display:inline-block;
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://placekitten.com/16/16);
}

.icon-a {
    background-position:0 0;
}

/* ----- CLEARFIX ----- */

.cf {
    *zoom:1;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}