JSFiddle - React, Tailwind, and code Playground

by needlethread

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>
<!-- Based on http://jsfiddle.net/needlethread/0b25eacw/ Getting checkboxes to sit side-by-side with an input field. 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-type="horizontal" data-mini="true">
        <legend>Horizontal checkboxes:</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">R3</label>
    </fieldset>
    <fieldset data-role="shorties" data-type="horizontal" data-mini="true">
        <legend>Radios:</legend>
        <input type="radio" name="radio-h-2a" id="radio-h-2a" />
        <label for="radio-h-2a">R1</label>
        <input type="radio" name="radio-h-2b" id="radio-h-2b" />
        <label for="radio-h-2b">R2</label>
        <input type="radio" name="radio-h-2c" id="radio-h-2c" />
        <label for="radio-h-2c">R3</label>
    </fieldset>
    <fieldset data-role="shorties" data-type="horizontal" data-mini="true">
        <legend>Text input:</legend>
        <input type="checkbox" name="checkbox-txt1" id="checkbox-txt1" />
        <label for="checkbox-txt1">One</label>
        <input type="text" name="txt" id="txt" placeholder="abc" value="" 
        data-wrapper-class="shorties-textinput"/>
    </fieldset>
</form>

CSS

[data-role="shorties"] .ui-checkbox label, [data-role="shorties"] .ui-radio label {
    width: 50px;
    float: left;
    display:inline-block;
}
[data-role="shorties"] .ui-checkbox input, [data-role="shorties"] .ui-radio input {
    display: none;
}
div.shorties-textinput {
    display: inline-block;
    width: 200px;
    float: left;
    margin-top: 0px;
    margin-bottom: 0px;
}
div.shorties-textinput.ui-input-text input {
    min-height: 0px;
    line-height: 1.3em;
    background-color: #FFFFD0;
}