How can horizontal Divs be tied to each other so that when one grows vertically, an "associated" one grows vertically with it?

Question

I need to create a form that has three horizontal divs which are interrelated, somewhat like the rows in an html table or the cells in a spreadsheet.

What I mean is with this series of horizontal divs:

Column1     Column2     Column3

...when Column2 grows in height (due to elements being dynamically added to it), Column1 must grow vertically in lockstep with it.

Similarly, but more complex"ily," Column2 may have multiple groupings of related elements. Each grouping needs to be tied vertically to one of the "rows" in Column3.

IOW, Column1 will grow in height as Column2 adds "rows", thus "shadowing" Column2 in that way; but then, when elements are added to the first section of Column3 (which are associated with the first "row" of Column2), Column2 will shadow the height of the first related collection of elements in Column3's first section.

Perhaps a visual representation would be clearer:

Column1     Column2     Column3
======      ======      ======
Fri Aug 21  Shift 1     Something about Shift1
Sat Aug 22  Shift1      

...when a second shift is added on Friday:

Column1     Column2     Column3
======      ======      ======
Fri Aug 21  Shift 1     Something about Shift1
            Shift 2     
Sat Aug 22  Shift1      

...Column1 keeps vertical pace with Column2 when Shift2 was added for Friday.

Now, more elements are added to Column3 for Friday's Shift1, and Shift1 expands downward/vertically to accommodate it:

Column1     Column2     Column3
======      ======      ======
Fri Aug 21  Shift 1     Something about Shift1
                        Something more about Shift1
            Shift 2     
Sat Aug 22  Shift1      

In what way can this interrelationship be established and maintained? How can this be done in Bootstrap (or otherwise, for that matter)?

Answer 1

The simplest and probably most robust way to accomplish the 3-column layout where each div always maintains equal height with the other two is with the HTML table element.

HTML

<table>
    <col>
    <col>
    <col>
    <tr>
        <td><div>DIV #1</div></td>
        <td><div>DIV #2</div></td>
        <td><div>DIV #3</div></td>
    </tr>
</table>

CSS

table {
    table-layout: fixed;
}

col {
    width: 100px;
}

td {
    border: 1px solid black;
    font-size: 1.5em;
    padding: 10px;
}

In this demo, any amount of text you put in any div will take all other div heights with it. http://jsfiddle.net/n7170pxg/1/

Answer 2

Check out those two articles for display: table and display: table-cell. They might be the answer to what you are looking for.

-http://colintoh.com/blog/display-table-anti-hero

-http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

The last link seems to be the best solution.

HTML

<div class="container">
    <div class="column">Column 1.</div>
    <div class="column">Column 2 is a bit longer.</div>
    <div class="column">Column 3 is longer with lots of text in it.</div>
</div>

CSS

.container {
  display: table;
}
.column {
  display: table-cell;
  width: 100px;
}