JSFiddle - React, Tailwind, and code Playground

by charlesjourdan

HTML

<div class="span7">
    <div class="controls">
        <div class="input-prepend">
            <span class="add-on">Location</span>
            <input name="ctl00$ContentPlaceHolder1$tbLocation" type="text" id="tbLocation" class="span12 span-fix" placeholder="Location">
        </div>
    </div>
</div>

CSS

input{
    -webkit-appearance: none;
-webkit-border-image: none;
-webkit-box-shadow: rgba(0, 0, 0, 0.0742188) 0px 1px 1px 0px inset;
-webkit-rtl-ordering: logical;
-webkit-transition-delay: 0s, 0s;
-webkit-transition-duration: 0.20000000298023224s, 0.20000000298023224s;
-webkit-transition-property: border, box-shadow;
-webkit-transition-timing-function: linear, linear;
-webkit-user-select: text;
background-color: white;
border-bottom-color: #CCC;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #CCC;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #CCC;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #CCC;
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.0742188) 0px 1px 1px 0px inset;
box-sizing: border-box;
color: #555;
cursor: auto;
display: inline-block;
float: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
height: 30px;
letter-spacing: normal;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 30px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 4px;
position: relative;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: top;
white-space: nowrap;
width: 100%;
word-spacing: 0px;
}

.add-on{
    -webkit-border-image: none;
background-color: #EEE;
border-bottom-color: #CCC;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #CCC;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #CCC;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #CCC;
border-top-left-radius: 3px;
border-top-right-radius: 0px;
border-top-style: solid;
border-top-width:...

JavaScript

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var wide = $(this).width(), /* create a variable that holds the width of the form */
            label = $(this).prev('.add-on').outerWidth(); /* create another variable that holds the width of the previous label */
        $(this).width( (1-(label + $(this).outerWidth() - $(this).width())/$(this).parent().width()) *100 + "%" );
    });
});