JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
    <td onMouseover=this.bgColor='#E6E6E6' onMouseout=this.bgColor='#FFFFFF' onclick=checkbox('12345')><div>
<label for='12345'>
<input style='vertical-align:middle' type='checkbox' name='frnd[]' value='12345' id='12345'/>
<img style='vertical-align:middle' src='http://s13.postimage.org/je9k86un7/img.jpg'>
<frndlist>dummy 1 verylongnameverylongname</frndlist>
        </label></div>
</td>

        <td onMouseover=this.bgColor='#E6E6E6' onMouseout=this.bgColor='#FFFFFF' onclick=checkbox('12345')><div>
<label for='12345'>
<input style='vertical-align:middle' type='checkbox' name='frnd[]' value='12345' id='12345'/>

<img style='vertical-align:middle' src='http://s13.postimage.org/je9k86un7/img.jpg'>
<frndlist>dummy 1 verylongnameverylongname</frndlist>
</label>
        </div>
</td>    <td onMouseover=this.bgColor='#E6E6E6' onMouseout=this.bgColor='#FFFFFF' onclick=checkbox('12345')><div>
<label for='12345'>
<input style='vertical-align:middle' type='checkbox' name='frnd[]' value='12345' id='12345'/>

<img style='vertical-align:middle' src='http://s13.postimage.org/je9k86un7/img.jpg'>
<frndlist>dummy 1 verylongnameverylongname</frndlist>
</label>
        </div>
</td>
</tr>
     


</table>

CSS

label { display: inline-block; width: 100%; }

td {
    white-space: nowrap;
    overflow: hidden;
    max-width: 173px;
    border: 1px solid black;
   }
td div {width: 100%; overflow: hidden; }

frndlist {
font-size:11px;
font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
     }