Looking to design a form with three interconnected horizontal divs, creating a structure similar to HTML table rows or spreadsheet cells.
Let's imagine a series of horizontal divs:
Column1 Column2 Column3
...as Column2 increases in height (due to dynamically added elements), Column1 should also grow vertically alongside it.
Furthermore, Column2 may contain multiple groupings of related elements. Each grouping should align vertically with one of the "rows" in Column3.
In other words, when Column2 expands with additional "rows", Column1 should shadow its growth; however, if new elements are added to the first segment of Column3 (associated with the initial "row" of Column2), then Column2 will adjust its height to match that particular collection of elements in Column3.
Perhaps a visual aid would help illustrate this concept:
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 maintains its vertical alignment with Column2 after adding Shift2 for Friday.
Now, additional elements are inserted into Column3 for Friday's Shift1, causing Shift1 to expand downwards/vertically accordingly:
Column1 Column2 Column3
====== ====== ======
Fri Aug 21 Shift 1 Something about Shift1
Something more about Shift1
Shift 2
Sat Aug 22 Shift1
How can we establish and uphold this interrelationship? What methods can be used within Bootstrap (or any other framework)?