JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<table><tr>
<td class="cat">
    a<span class="icon">b</span>c
</td>
<td class="cat">
    a<span class="icon indent">b</span>c
</td>
<td class="cat">
    <span class="icon indent">b</span>
</td>
</tr></table>

</body>

CSS

body { margin: 50px; padding: 0; font: 13px "trebuchet ms"; }

td.cat {
    padding: 20px;
    text-align: center;
}
td.cat .icon {
    display:inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/silk2/tick.png") repeat;
    overflow: hidden;
}
.indent { text-indent: -9999px; }