JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container" id="container">
  <h1>Hello World</h1>
  <div class="row-fluid control-group">
    <div class="span12 input-append input-prepend">
      <span style="width:150px;" class="add-on">Who is the boss?</span>
      <input class="span12" type="text" value="I am" />
      <span class="add-on">&deg;C</span>
    </div>
  </div>

  <div class="row-fluid control-group">
    <div class="span6 input-prepend">
      <span style="width:150px;" class="add-on">Are you a boss?</span>
      <input class="span12" type="text" />
    </div>
    <div class="span6 input-append">
      <input class="span12" type="text" />
      <span class="add-on">Wrap mehh</span>
    </div>
  </div>

  <div class="row-fluid control-group">
    <div class="span8 input-prepend">
      <span class="add-on">&deg;C</span>
      <input class="span12" type="text" />
    </div>
    <div class="span4 input-append">
      <input class="span12" type="text" />
      <span class="add-on">&deg;C</span>
    </div>
  </div>

  <div class="row-fluid control-group">
    <div class="span10 input-prepend">
      <span class="add-on">&deg;C</span>
      <input class="span12" type="text" />
    </div>
    <div class="span2 input-append">
      <input class="span12" type="text" />
      <span class="add-on">&deg;C</span>
    </div>
  </div>
  
    <h1>add-on-fix</h1>
    
  <div class="row-fluid control-group">
    <div class="span12 input-append input-prepend add-on-fix">
      <span style="width:150px;" class="add-on">Who is the boss?</span>
      <input class="span12" type="text" value="I am" />
      <span class="add-on">&deg;C</span>
    </div>
  </div>

  <div class="row-fluid control-group">
    <div class="span6 input-prepend add-on-fix">
      <span style="width:150px;" class="add-on">Are you...

JavaScript

function windowChange() {
  $('.add-on-fix').each(function(){
    var input = $('input', this);
    var width = input.parent().width()
      -parseInt(input.css('padding-left'))
      -parseInt(input.css('padding-right'))
      -parseInt(input.css('border-left'))
      -parseInt(input.css('border-right'));

    $(this).children('.add-on').each(function(){
      width -= $(this).width() - 1
        +parseInt($(this).css('padding-left'))
        +parseInt($(this).css('padding-right'))
        +parseInt($(this).css('border-left'))
        +parseInt($(this).css('border-right'))
    });

    input.width(width);
  });
}

$(window).resize(function() {
  windowChange();
});
$(function() {
  windowChange();
});