I am attempting to code a dynamic object for use in an unordered list. I have a mock up of the HTML here:

<ul class='Main'>
    <li class='Node'>
        <span class='Node_Light'>
        </span>
        <span class='Node_Control'>
            <span class='Ctrl_Name'>
                <span class='CtrlN_Text'>Random Name</span>
                <span class='CtrlN_Edit'>[%]</span>                
            </span><br/>
            <span class='Ctrl_ID'>ff:ff:ff:ff:ff:ff</span><br/>
            <span class='Ctrl_Buttons'>
                <span class='CBttn_On'>[%]</span>
                <span class='CBttn_Off'>[%]</span>
                <span class='CBttn_Blink'>[%]</span>
                <span class='CBttn_Config'>[%]</span>
                <span class='CBttn_Graph'>[%]</span>
            </span>
        </span>
        <span class='Node_Data'>
            <span class='ND_Sens0'>
                <span class='Sens_Lable'>temp:</span>
                <span class='Sens_Data'>72</span>
                <span class='Sens_Units'>&#176;F</span>
            </span><br/>
            <span class='ND_Sens1'>
                <span class='Sens_Lable'>Sens1:</span>
                <span class='Sens_Data'>Off</span>
                <span class='Sens_Units'></span>
            </span><br/>
            <span class='ND_Sens2'>
                <span class='Sens_Lable'>Sens2:</span>
                <span class='Sens_Data'>Off</span>
                <span class='Sens_Units'></span>
            </span><br/>
            <span class='ND_Sens3'>
                <span class='Sens_Lable'>Sens3:</span>
                <span class='Sens_Data'>Off</span>
                <span class='Sens_Units'></span>
            </span><br/>
            <span class='ND_Sens4'>
                <span class='Sens_Lable'>Sens4:</span>
                <span class='Sens_Data'>Off</span>
                <span class='Sens_Units'></span>
            </span>
        </span>
    </li>
</ul>

and I am attempting to wrangle this HTML into something like:

My first problem was that the 3x Outer elements would stack vertically instead of horizontally ... I solved this with the following CSS, but it doesnt feel like the right solution:

ul {
    list-style-type: none;
    padding:0;
    margin:0;
}

.Node {

}

.Node_Light {
    height:6em;
    width:2em;
    position:absolute;
    border-style:solid;
    border-width:1px;
}

.Node_Control {
    height:6em;
    width:15em;
    position:absolute;
    left:2.55em;
    border-style:solid;
    border-width:1px;
}

.Node_Data {
    height:6em;
    width:6em;
    position:absolute;
    left:17.6em;
    border-style:solid;
    border-width:1px;
}

One thought was to use a table, but I dont think that is the correct solution either.

Ideas?

I would like to have the content dynamically resize on page resize and am not opposed to doing it all via JavaScript, but I have a feeling it would be more efficient to do it via CSS ... I just dont know where to begin.