Dynamically resize divs in a table using CSS

Dynamically resize divs in a table using CSS

I've searched through this site and it seems that the best way to resize
components dynamically is though CSS "position" and "width/height"
parameters.
I have an app which partially looks like so:
It is currently being resized through javascript ($(window).width(),
$(window).height()), and I would like to do it properly though CSS.
Here is my table layout:
<table class="table">
<tr >
<td >
<div id="chartdiv1" ></div>
</td>
<td rowspan="3">
<div id="Simulation" ></div>
<div id="SimLabels" style="border: dashed; z-index: 1; width:
190px; position: relative; ">
<input type="checkbox" onchange="redrawSim()"
checked="checked" id="BedMassLabel"><strong style="color:
#4bb2c5;">Bed Mass (kg)</strong><br />
<input type="checkbox" onchange="redrawSim()"
checked="checked" id="H2OBedLabel"><strong style="color:
#EAA228;">H2O in Fluid Bed (kg)</strong><br />
<input type="checkbox" onchange="redrawSim()"
checked="checked" id="BedTempLabel"><strong style="color:
#c5b47f;">Temperature of Bed (C)</strong><br />
<input type="checkbox" onchange="redrawSim()"
checked="checked" id="evapRateLabel"><strong style="color:
#579575;">Evaporation Rate (?)</strong>
</div>
</td>
</tr>
<tr >
<td>
<div id="chartdiv2" ></div>
</td>
</tr>
<tr >
<td >
<div id="chartdiv3" ></div>
</td>
</tr>
</table>
I have tried many combinations of positions, widths and heights, but very
often it seems that no matter what percentage I put down for the
width/height, the layout has a mind of its own. It should be mentioned
that I am using both MVC and Twitter Bootstrap, so perhaps my html is
affected by this. Could someone help me fix my html so that it replicates
the design above with dynamic sizing? Thanks a lot, it is much
appreciated!