JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div class='sfTable'>
    <div class='sfRow'>
        <div class='sfCell1'><img class='sfProfilePic' src='https://api.twitter.com/1/users/profile_image?screen_name=codef0rmer&size=normal' width='48px' height='48px' /></div>        
        <div class='sfCell2'>
            <img src='https://twitter.com/phoenix/favicon.ico'/>
            <span class='sfHandle'>codef0rmer</span>
            
        </div>        
    </div>
</div>

CSS

.sfTable {
    display : table;
    border-collapse: collapse;
    width : 207px;
    height : 57px;
    border : 1px solid #CCCCCC;        
}
.sfRow {
    display : table-row;
    width : 100%;
}
.sfCell1 {
    display : table-cell;
    width : 48px;
    padding : 4px 0px 0px 5px;
}
.sfCell2 {
    display : table-cell;
    width : 100%;
    vertical-align : top;
    text-align : right;
    border : 1px solid red;
}
.sfCell2 span.sfHandle {
    font : 13px "Tahoma",Helvetica,Arial,sans-serif;
    font-weight : bold;
    color : #0084B4;
    margin-right : 5px;
}
img {
    vertical-align : middle;
    margin-right : 5px;    
}

JavaScript

//social flair project - Updated