fiddle.css

body {
	font-family: Helvetica, Verdana
}
p {
	padding: 7px 10px;
}
#demo { 
	border: 1px solid #999;
}

#table {

}

#table TR {

}

#table TR.original_row {
  line-height: 120%;

}

.original_row {
  border: 1ex solid brown;
}

#table TR .name {
}
.name {
  border: 2ex solid pink;
}

#table TR .content {
}
.content {
  border: 2ex solid purple;

}

#table TR.shim {
}
.shim {
  border: 1ex solid red;

}

#table TR.shim > TD {
}
.shim > TD,
.shim > .tcell {
  border: 1ex solid blue;
}

#container {
  display: table;
}

#container .tbody {
  display: table-row-group;
}

#container .trow {
  /*
  display: table-row;
  */
}

#container .tcell {
  display: table-cell;
}

.expand {
  display: none;
}

.expanded .expand {
  display: inherit;
}
.expanded TR.expand {
  display: table-row;
}

.expanded .expand {
  display: inherit;
}

#container .trow.expanded,
#container .trow.expanded .block {
  display: block;
}

#container .trow.expanded .name {
  float: left;
}

#container .trow.expanded .block {

}

/*****/
/*EOF*/

fiddle.html

<table id="table">
  <thead>
  </thead>

  <tbody>
    <tr class="original_row">
      <td class="name" >
        <strong>small content goes here</strong>
      </td>
      <td class="content">
        <p style="letter-spacing: 2ex;"
          > Long flowing content goes here. </p>
        <div class="expand">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing
            elit.  Nunc imperdiet rutrum euismod. Nunc volutpat
            vestibulum velit, eu iaculis ligula euismod sit amet.
            Nunc volutpat facilisis nibh, nec laoreet ipsum aliquam
            et.

          </p> <p> Sed euismod rhoncus nulla vitae sodales. Duis
            pulvinar, lorem a condimentum pharetra, arcu nisl
            imperdiet ipsum, at consequat elit dui eget metus.
            Integer aliquam arcu in tortor condimentum vitae
            volutpat tellus adipiscing.

          </p> <p> Mauris a metus neque. Morbi tempus, metus in
            hendrerit elementum, leo nulla luctus purus, tincidunt
            interdum nibh augue id massa. Morbi eu mauris ante.
            Aliquam rhoncus mauris id ligula commodo vel blandit
            sem ultricies. Nam placerat diam ut eros euismod et
            lobortis enim consectetur. Maecenas adipiscing
            porttitor justo, non facilisis turpis sollicitudin ut.
            Ut rhoncus viverra urna quis egestas.  Praesent non
            nisl libero, vitae semper erat.
          </p>
        </div>

      </td>
    </tr>

    <tr class="shim" >
      <td colspan="2" rowspan="1"> SHIM </td>
    </tr>
  </tbody>
  <tbody class="expanded">

    <tr class="original_row">
      <td class="name">
        <strong>small content goes here</strong>
      </td>
      <td class="content" >
        <p style="letter-spacing: 3ex;"
          > Long flowing content goes here. </p>

      </td>
    </tr>
    <tr class="expand" >
      <td colspan="2" > SHIM
        <p style="letter-spacing: 3ex;"
          > Long flowing content goes here. </p>
        <div class="expand">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing
            elit.  Nunc imperdiet rutrum euismod. Nunc volutpat
            vestibulum velit, eu iaculis ligula euismod sit amet.
            Nunc volutpat facilisis nibh, nec laoreet ipsum aliquam
            et.

          </p> <p> Sed euismod rhoncus nulla vitae sodales. Duis
            pulvinar, lorem a condimentum pharetra, arcu nisl
            imperdiet ipsum, at consequat elit dui eget metus.
            Integer aliquam arcu in tortor condimentum vitae
            volutpat tellus adipiscing.

          </p> <p> Mauris a metus neque. Morbi tempus, metus in
            hendrerit elementum, leo nulla luctus purus, tincidunt
            interdum nibh augue id massa. Morbi eu mauris ante.
            Aliquam rhoncus mauris id ligula commodo vel blandit
            sem ultricies. Nam placerat diam ut eros euismod et
            lobortis enim consectetur. Maecenas adipiscing
            porttitor justo, non facilisis turpis sollicitudin ut.
            Ut rhoncus viverra urna quis egestas.  Praesent non
            nisl libero, vitae semper erat.
          </p>
        </div>
      
      
      </td>
    </tr>

  </tbody>

  <tfoot>
  </tfoot>
</table>


<div id="container">
  <div class="tbody">
    <div class="trow original_row">
      <div class="tcell name">
        <strong>small content goes here</strong>
      </div>
      <div class="tcell content">
        <p style="letter-spacing: 2ex;"
          > Long flowing content goes here. </p>

        <div class="expand">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing
            elit.  Nunc imperdiet rutrum euismod. Nunc volutpat
            vestibulum velit, eu iaculis ligula euismod sit amet.
            Nunc volutpat facilisis nibh, nec laoreet ipsum aliquam
            et.

          </p> <p> Sed euismod rhoncus nulla vitae sodales. Duis
            pulvinar, lorem a condimentum pharetra, arcu nisl
            imperdiet ipsum, at consequat elit dui eget metus.
            Integer aliquam arcu in tortor condimentum vitae
            volutpat tellus adipiscing.

          </p> <p> Mauris a metus neque. Morbi tempus, metus in
            hendrerit elementum, leo nulla luctus purus, tincidunt
            interdum nibh augue id massa. Morbi eu mauris ante.
            Aliquam rhoncus mauris id ligula commodo vel blandit
            sem ultricies. Nam placerat diam ut eros euismod et
            lobortis enim consectetur. Maecenas adipiscing
            porttitor justo, non facilisis turpis sollicitudin ut.
            Ut rhoncus viverra urna quis egestas.  Praesent non
            nisl libero, vitae semper erat.
          </p>
        </div>
      </div>
    </div>

    <div class="trow shim">
      <div class="tcell" > SHIM </div>
    </div>

    <div class="trow original_row expanded">
      <div class="tcell name block">
        <strong>small content with longer length goes here</strong>
      </div>
      <div class="tcell content block">
        <p style="letter-spacing: 2ex;"
          > Long flowing content goes here. </p>

        <div class="expand">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing
            elit.  Nunc imperdiet rutrum euismod. Nunc volutpat
            vestibulum velit, eu iaculis ligula euismod sit amet.
            Nunc volutpat facilisis nibh, nec laoreet ipsum aliquam
            et.

          </p> <p> Sed euismod rhoncus nulla vitae sodales. Duis
            pulvinar, lorem a condimentum pharetra, arcu nisl
            imperdiet ipsum, at consequat elit dui eget metus.
            Integer aliquam arcu in tortor condimentum vitae
            volutpat tellus adipiscing.

          </p> <p> Mauris a metus neque. Morbi tempus, metus in
            hendrerit elementum, leo nulla luctus purus, tincidunt
            interdum nibh augue id massa. Morbi eu mauris ante.
            Aliquam rhoncus mauris id ligula commodo vel blandit
            sem ultricies. Nam placerat diam ut eros euismod et
            lobortis enim consectetur. Maecenas adipiscing
            porttitor justo, non facilisis turpis sollicitudin ut.
            Ut rhoncus viverra urna quis egestas.  Praesent non
            nisl libero, vitae semper erat.
          </p>
        </div>
      </div>
    </div>

  </div>

</div>


<p>Result will appear below with 1 sec delay</p>
<div id="demo"><p>This text will be replaced</p></div>

<p><a href='http://doc.jsfiddle.net/use/gist_read.html' target='_new'>Documentation</a></p>
<p><a href='http://gist.github.com/606699/' target='_new'>Gist Demo</a></p>

fiddle.js

window.$ = jQuery;

window.me = { };




(function($) {


  window.me = {
    reset: function reset ( ) {
      me.table = $('#table');
      me.original = me.table.find('TR.original_row:first');
      me.name = me.original.find('.name');
      me.content = me.original.find('.content');
    }
  };

  $( function() {
      console.log('READY!');
      me.reset( );
  });

})(jQuery);

//////
// EOF

fiddle.manifest

name: Table Demo
description: jsFiddle demo hosted on Gist
authors:
  - Ben West
resources:
  - /js/empty.js
  - /css/normalize.css
normalize_css: no

fiddle.response.html

<p>This <span>content</span> is loaded from Gist via XHR request (<span>Ajax</span>)</p>
<p>It has also some <span>JavaScript</span> code which is setting the background for spans</p>
<script type='text/javascript'>
	$$('#demo span').each(function(el) {
		el.setStyle('backgroundColor', '#ffb');
	});
</script>