CSS Equivalent of Table Rowspan with Fluid Height

First of all, what you are doing looks like a table to me, so you might want to consider that. Doing it with CSS however is a bit more tricky (unless you do the table styling in CSS). The following code works but does not center vertically the text in the box:

<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
  <div style="float:right; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
  <div style="border: 1px solid black; margin-right: 102px;">
    <div>
      This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
    </div>
    <div style="clear: right; margin-bottom: -1px;"></div>
  </div>
</div></body></html>

Table cells in CSS are easier:

<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
  <div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
  </div>
  <div style="display: table-cell; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
</div>
</body>
</html>

How DIV & CSS work with Rowspan & Colspan?

Try adding another class to your merged column, like so:

<div class='cell merged'>Merged Area</div>

and change the css of the merged area, like so:

.merged{
    width:50%;
    height:50%;
}

The reason I did this is because you had the same class on your merged area, but you wanted the size to take up double the space of a normal cell. So all I did was add an additional class changing the width and height of the merged area to get the desired result.

Here is an updated Fiddle:

https://jsfiddle.net/6hx2uooz/4/

Rowspan not using top row

I got rid of the all of the rowspan and just gave one cell display: block. I can then adjust the height of that cell specifically without changing the others. I used calc to provide a variable height.

Vertical alignment and distribution of rows in table

So there is your solution in the snippet below :

table , td, th {

 border: 1px solid #595959;

 border-collapse: collapse;

}

td, th {

 padding: 3px;

 width: 250px;

 height: 150px;

}

th {

 background: #f0e6cc;

}

.even {

 background: #fbf8f0;

}

.odd {

 background: #fefcf9;

}

<table>

 <tbody>

  <tr>

   <td style="height:1em">This is a test thank you for your attention</td>

   <td rowspan="2"></td>

  </tr>

  <tr>

   <td></td>

  </tr>

 </tbody>

</table>

Vertical alignment and distribution of rows in table

So there is your solution in the snippet below :

table , td, th {

 border: 1px solid #595959;

 border-collapse: collapse;

}

td, th {

 padding: 3px;

 width: 250px;

 height: 150px;

}

th {

 background: #f0e6cc;

}

.even {

 background: #fbf8f0;

}

.odd {

 background: #fefcf9;

}

<table>

 <tbody>

  <tr>

   <td style="height:1em">This is a test thank you for your attention</td>

   <td rowspan="2"></td>

  </tr>

  <tr>

   <td></td>

  </tr>

 </tbody>

</table>

CSS table layout with fluid widths

This is not a problem with display (CSS2), but it requires IE7+. Please see this example fiddle:

Markup:

<form>
    <span>
        <label for="edit1">First label:</label><input id="edit1" type="text" />
        <label for="edit2">Second label:</label><input id="edit2" type="text" />
    </span>
    <span>
        <br /><p>That sounds right!</p>
        <br /><p>Problem!</p>
    </span>        
    <span>
        <label for="edit3">3:</label><input id="edit3" type="text" />
        <label for="edit4">Fourth and last label:</label><input id="edit4" type="text" />
    </span>
    <span>
        <br /><p>No succes. Try again and enter another value.</p>
        <br /><p>Wait...</p>
    </span>        
</form>

Style sheet:

form {
    display: table;
}
form span {
    display: table-row;
}
form span * {
    vertical-align: top;
    padding-right: 10px;
    display: table-cell;
}

Rowspans and vertical aligning both top AND center in CSS tables

Ok, understood now:

HTML CODE:

<div id="thetable">
    <div id="tablerow">
        <div id="main-content" <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
        </div>
        <div id="main-sidebar">
            <div id="titlediv">Title is currently aligned to top via Javascript</div>
            <div id="contentdiv">
            Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>
            </div>
        </div>
    </div>

CSS CODE:

body, td, th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
}
body {
    background-color:#652739;
    color:#CCC;
}
#thetable {
    width:90%;
    max-width:1180px;
    min-width:750px;
    position:relative;
    margin:0px auto;
}
#thetable, #thetable tr td {
    border:1px solid #000;
}
#leftcell {
    width:40%;
    text-align:center;
}
#titlecell {
    padding-left:50px;
    width:60%;
    vertical-align:top;
    height:200px;
}
#detailscell {
    padding-left:80px;
    width:60%;
    padding-right:15px;
    vertical-align:middle;
    height:300px;
}

I update ur jsfiddle too...

Hope that help.

CSS Equivalent of Table Rowspan with Fluid Height