JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<!--
Getting checkboxes to sit side-by-side and still use the classic "checkmark" look.

From: https://forum.jquery.com/topic/can-i-get-the-icon-to-show-for-a-checkbox-in-a-controlgroup and http://home.jejaju.com/shorties
-->
<form>
<fieldset data-role="shorties" data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal:</legend>
    <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"/>
    <label for="checkbox-h-2a">One</label>
        <input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b"/>
    <label for="checkbox-h-2b">Two</label>
        <input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c"/>
    <label for="checkbox-h-2c">Three</label>
</fieldset>
</form>

CSS

[data-role="shorties"] .ui-checkbox label
    {
        width: 50px;
        float: left;
        display:inline-block;
    }

[data-role="shorties"] .ui-checkbox input { display: none; }