JSFiddle - React, Tailwind, and code Playground

by mlsteeves

HTML

<table>
    <tr>
        <td>
<div class="section-header row">
    <div class="cell">1</div>
    <div class="cell">header</div>
    <div class="cell">icons</div>
</div>
<div class="stmnts clear-all">
    <div class="row clear-all">
        <div class="table">
            <div class="wbsNumber cell">1</div>
            <div class="roleIcon cell left-border">
                <img src="http://lorempixel.com/output/abstract-q-g-32-32-2.jpg"/>
            </div>
            <div class="statementContent cell left-border">
                <div class="statement-icon">
                </div>
                <div class="statement-text">
                    <p class="text"> something somethingsomemgjskdjf sf</p>
                    <div>
                        <a>conditions link</a>
                    </div>
                    <div> <a>Hidden assets link</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="table">
            <div class="wbsNumber cell">1</div>
            <div class="roleIcon cell left-border">
                <img src="http://lorempixel.com/output/abstract-q-g-32-32-2.jpg"/>
            </div>
            <div class="statementContent cell left-border">
                <div class="statement-icon">
                </div>
                <div class="statement-text">
                    <p class="text"> something somethingsomemgjskdjf sf</p>
                </div>
                <div>
                    <a>conditions link</a>
                </div>
                <div> <a>Hidden assets link</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bottom-of-table"></div>
        </td>
    </tr>
</table>

CSS

.row{
    width: 100%;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}
.table{
    display: table;
    width: 100%;
}
.cell{
    display: table-cell;  
    padding-left: 5px;
    padding-top: 25px;
    padding-bottom: 15px;
    padding-right: 8px;
}
.left-border{
    border-left: 1px solid black
}

.bottom-of-table{
    border-top: 1px solid black;
}
.roleIcon{
    width: 32px;
}
.wbsNumber{
    width: 32px;
}
.statement-text{
    float:left;
}
.statement-icon{
    float:left;
    display:none;
}
.section-header{

}
clear-all:{
    clear: both;
}
}