title: Make parent element same width as child
body: <p>So I have this sort of html</p>
  
  <pre><code>&lt;div class="table-container"&gt;
    &lt;input type="text" class="some-class"/&gt;
    &lt;table class="dataTable"/&gt; 
  </code></pre>
  
  <p></p>
  
  <p>I want it so that the .some-class is always some percentage of the width of .dataTable(let's say 40%). I also want it so that if I append multiple table-containers(with the same children), that they appear below each other.</p>
  
  <p>I've achieved the first requirement through the use of inline-block, but that means that these elements appear on the same line. </p>
  
  <p>How do I achieve both? </p>
  
  <p>JSFIDDLE-
  <a href="http://jsfiddle.net/9xR78/" rel="nofollow">http://jsfiddle.net/9xR78/</a></p>