JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table class="checkbox-list">
    <tbody><tr>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Some really long text that wraps and wraps and wraps and wraps and wraps and wraps and wraps and wraps and wraps and wraps and wraps and wraps...</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
    </tr><tr>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
    </tr>
</tbody></table>

CSS

.checkbox-list {
}
img.placeholder{
    width:16px;
    height:16px;
    background-color:lightblue;
    float: left;
}
td {
    padding:2px;
    width:150px;
    vertical-align:top;
}
label {
    display: block;
    margin-left: 18px;
}