Equal height column across two divs

Question

I have been searching and cannot find an answer to this question. I have two divs, one contains one column and the other contains two columns. I am looking to get the three columns to equal heights across the the tow divs. I am sure this is possible I just don't know it yet. Here is code below. As you can see I can get them to align across the bottom but I am missing something.

 .cplan-section{ display: flex; }.technical-products{ width:33%; }.training-products{ width:66%; }.section-title{ padding: 30px 0; }.technical-products, .training-products{ display:flex; flex-direction: column; justify-content: space-between; }.cproducts, .train-video, .job-aids{ padding:10px; }.col-header p{ display: inline-block; vertical-align: middle; line-height: normal; }.col-body{ padding:0 10px; color:#000; background-color: #d5deed; }.col-header{ min-height: 100px; line-height: 100px; text-align: center; background-color: #98cb42; color:#fff; }.col-tp{ width:50%; border:2px solid #000; }.col-cp{ border:2px solid #000; }.sectioncp, .sectiontp{ display:flex; }.col-tp{ flex-direction:vertical; }.cp-header, .tv-header, .ja-header{ background-color:#98cb42; color:#fff; padding:5px } /*media for plan section */ @media (max-width: 767px){.covid-plan-section{ display: inline; }.technical-products, .training-products{ display:block; }.technical-products{ width:100%; }.training-products{ width:100%; }.sectiontp{ display:flex; }.col-tp{ display:flex; flex-direction: column; justify-content: space-between; } } @media (max-width: 479px){.covid-plan-section{ display: block; }.technical-products, .training-products{ display:block; }.technical-products{ width:100%; }.training-products{ width:100%; }.sectiontp{ display:inline; }.col-tp{ width:100%; } }

 <div class=cplan-section> <div class=technical-products> <div class=section-title> <h2 style="text-align: center;">This is Section 1</h2> </div> <div class=sectioncp> <div class=col-cp> <div class=cproducts> <div class=col-header> <p style="text-align: center;">Title 1</p> </div> <div class=col-body> <ul> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> </ul> </div> </div> </div> </div> </div> <div class=training-products> <div class=section-title> <h2 style="text-align: center;">This is section 2</h2> </div> <div class=sectiontp> <div class=col-tp> <div class=train-video> <div class=col-header> <p style="text-align: center;">Title 2</p> </div> <div class=col-body> <ul> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text.</li> </ul> </div> </div> </div> <div class=col-tp> <div class=job-aids> <div class=col-header> <p style="text-align: center;">Title 2</p> </div> <div class=col-body> <ul> <li>Lorem Ipsum</li> <li>Lorem Ipsum</li> <li>Lorem Ipsum text</li> </ul> </div> </div> </div> </div> </div> </div>

Answer 1

Your proposal, without setting a height or min-height property is not possible. "Same-height" elements have no possibility of doing that, without referencing siblings in the same "line" using flexbox.

What you could do (unorthodox, almost a bad practice if you will be needing to dynamize, I'm guessing you won't), at least is my solution for your problem is to put it all together in the same flex container, one after the other.

That will end up as:

.title1
.title2
.col1
.col2
.col3

Rendering this:

But how? Your structure simplified:

<div class="cplan-section">
    <div class="products">
        <div class="title1">
            <h2 style="text-align:center;">This is Section 1</h2>
        </div>
        <div class="title2">
            <h2 style="text-align:center;">This is section 2</h2>
        </div>
        <div class="col1">
            <div class="cproducts">
                <div class="col-header">
                    <p style="text-align: center;">Title 1</p>
                </div>
                <div class="col-body">
                    <ul>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="train-video">
                <div class="col-header">
                    <p style="text-align: center;">Title 2</p>
                </div>
                <div class="col-body">
                    <ul>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col3">
            <div class="job-aids">
                <div class="col-header">
                    <p style="text-align: center;">Title 2</p>
                </div>
                <div class="col-body">
                    <ul>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum text</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

And this is your CSS:

html { padding:30px; }
* { font-family:"Arial", sans-serif; box-sizing:border-box; }

.cplan-section .products {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    border:1px solid #aaa;
    padding:10px;
}

.cplan-section .products div[class^="title"] {
    text-align:left;
    padding-left:20px;
}

.cplan-section .products .col1,
.cplan-section .products .col2,
.cplan-section .products .col3 {
    border:1px solid #777;
    padding:10px;
}

.cplan-section .products .title1,
.cplan-section .products .col1 { flex-basis:40%; }
.cplan-section .products .title2 { flex-basis:60%; }
.cplan-section .products .col2,
.cplan-section .products .col3 { flex-basis:30%; }

@media (max-width:479px) {
  .cplan-section .products {
    flex-direction:row;
    flex-wrap:wrap;
  }
    .cplan-section .products div[class^="title"],
    .cplan-section .products div[class^="col"] { flex-basis:100%; }
    .cplan-section .products .title1,
    .cplan-section .products .col1 { order:-2; }
    .cplan-section .products .title2 { order:-1; }
}

That's ok, but, what about when we stack elements in a mobile/responsive view? They will be badly organized. Ok, by default every flex element contained has a 0 'order' value, and they stack for rendering in order of appearance. So if I modify that property for the first 3 elements, that should do it. Take a look at the bottom of the CSS code.

And this is how viewport 479px and under should look:

Fiddle: https://jsfiddle.net/Dethdude/ch0mrgbe/23/