How Can Horizontal Divs Be Tied To Each Other So That When One Grows Vertically, An "associated" One Grows Vertically With It?

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 serie

Solution 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/

Solution 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

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

CSS

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