Make separator div same height as maximal neighbour div height - html

Question

How with help of css and html i could do this:
i have 3 div's, and i have separator between them, and this separator, and text-area div must be not 65px as in my example, but maximal height div (in example this is first div), for example if there i have 2 lines only, i will have smaller by height div, and separator must be same height (maximal). How could i do this... didn't have any ideas(
http://jsfiddle.net/crjsg/
<div class="introtext-text-area">
<div class="introtext-separator"></div>
<div class="introtext">
here is example text of test example with 3 <br>lines
</div>
<div class="introtext-separator">some text</div>
<div class="introtext"></div>
<div class="introtext-separator"></div>
<div class="introtext"></div>
</div>
css:
.introtext-text-area {
height: 65px;
width: 690px;
margin: 8px 0 0 0;
}
.introtext-separator {
width: 3px;
height: 65px;
float: left;
border: none;
background-color: red;
margin: 0 0 0 -1px;
}
.introtext {
width: 211px;
height: 58px;
float: left;
padding: 0 8px 0 8px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
text-shadow: 0px 0px 1px #c2c2c2;
word-wrap: break-word;
}
how could i set automatical height for text-block and separator, and this height must be same for 3 text div's and it's separators.

Answer 1

You can use display:table and borders :
<div class="introtext-text-area">
<div class="introtext">
here is example text of test
example
</div>
<div class="introtext">
some text
</div>
<div class="introtext">
some text
</div>
</div>
.introtext-text-area {
display:table;
border-right:solid red;
}
.introtext {
width: 211px;
padding:5px;
display:table-cell;
border-left:solid red;
}

Answer 2

Use these css defintions:
.introtext-text-area {
overflow: hidden;
width: 100%;
margin: 8px 0 0 0;
}
.introtext-separator {
float: left;
border: none;
margin: 0 0 0 -1px;
height: 100%;
}
.introtext {
width: 211px;
float: left;
padding: 0 8px 0 8px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
text-shadow: 0px 0px 1px #c2c2c2;
word-wrap: break-word;
}
.bordered {
border-left: 3px;
border-left-color: red;
border-left-style: solid;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Add the handy .bordered class to each of your divs:
<div class="introtext-separator bordered"></div>
<div class="introtext bordered">
The trick is that the parent div has overflow:hidden and the bordered class has really large paddings.
Forked fiddle