JSFiddle - React, Tailwind, and code Playground

HTML

<div class="post">
    <div class="post_cell">
        <input type="checkbox" />
    </div>
    
    <div class="post_cell">
        <img class="profile_img" src="" height="48">
    </div>
    
    <div class="post_body">
        <div class="post_details">
            <h2>
                <a href="javascript:void(0)" target="_blank" class="no_style">user</a>
            </h2>
            <span class="post_info">
                <span class="passed_time">15 hours ago</span> | 
                <a href="javascript:void(0)" class="no_style">3 Comments</a>
            </span>
        </div>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

CSS

body{
    background-color: #ccc;
}


h2{
    float: left;
    color: #525254;
    margin: 0px;
    font: bold 15px Arial, Helvetica, sans;
}

.post{
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
}

.post_cell{
    display: table-cell;
    vertical-align: middle;
}

.post_body{
    display: table-cell;
    width: 400px;
    opacity: 0.8;
}

.profile_img{
    border: solid 3px #ccc;
    width: 48px;
    height: 48px;
    margin: 0px 15px;
}

.post_info{
    color: #c3c3c3;
    font: normal 12px Arial, Helvetica, sans;
    margin-left: 8px;
}

a.no_style{
    color: inherit;
    text-decoration: inherit;
    font: inherit;
}


p {
    float: left;
    clear: both;
    color: #525254;
    margin: 0px;
    padding: 0px;
    line-height: 18px;
    font: normal 15px Arial, Helvetica, sans;
    
    word-wrap: break-word;
}