Welcome

.

Equal height column across two divs

by

Questions › Equal height column across two divs
0
Vote Up
Vote Down
Garmaine asked 4 years ago

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>