JSFiddle - React, Tailwind, and code Playground

by fled

HTML

<p>When you move the center divider to the left both inputs are resized accordingly,
but when you move the divider to the right, the table input keeps its width due to 
the table and its element relation.  Since the table width is dictated by its element's width,
its the egg and the chicken dilemma...</p>

<p>Here with a table</p>
<div class="data_container row-fluid">
    <div id="cont_det" class="hero-unit span8">
        <table border="1" width="100%">
        <tr>
            <td><label>Name: </label></td>
            <td>
                <input class="span12" type="text" id="name" name="name">
            </td>
        <tr>
            <td><label>Comment: </label></td>
            <td colspan="5">            
              <div class="span12 input-append" >
                <input class="span10 input_app" type="text" id="add_comm" name="add_comm">
                <button class="btn btn_app" id="add_comm_btn" type="button">+</button>
              </div>
            </td>            
        </tr>    
        </table>
    </div>    
</div>
<p>Here with a div</p>
<div class="data_container row-fluid">
    <div id="cont_det" class="hero-unit my_hero span8">
        <div>
            <input id="thefile" class="span12" type="text">
        </div>
        <div class="input-append">
            <input id="filename1" class="span10 input_app" type="text">
            <a class="btn btn_app" id="btn_browse" >Browse</a>
        </div>
    </div>    
</div>

CSS

/*!
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
.google-maps img {
  max-width: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

@media print {
  * {
    color: #000 !important;
   ...

JavaScript

// Document ready
$(document).ready(function() {
    sizeInputs();
});

// If the window is resized
$(window).resize(function(){
    sizeInputs() ;  
});  

function sizeInputs() {
  $(document).find(".input_app").each(function(){  
    var container_width = $(this).parent().innerWidth();
    var btn_width = $(this).parent().find(".btn_app").width();
    // I don't know why but I need to add 25 here...???
    $(this).css('width', container_width-(btn_width + 25));  
  }); 
}