JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

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://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<br>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <label for="star">Use name:</label>
    <input type="checkbox" name="star" id="star" class="ui-btn-inline" />
   
    <input type="text" name="yourname" id="yourname" placeholder="your name ..." value="" data-wrapper-class="controlgroup-textinput ui-btn bc_field_wide" />
</div>
<input type="checkbox" name="normal" id="normal" data-mini="true" class="ui-btn-inline" />
<label for="normal">Normal</label>

CSS

div.controlgroup-textinput {
    padding-top: .12em;
    padding-bottom: .12em;
    padding-left: 0px;
    padding-right: 0px;
}
div.ui-controlgroup-controls label[for].ui-btn::after {
    content:" ";
    display:inline-block;
    width:14px;
    height:14px;
}