responsive columns all same height with heading, paragraph, button all same height - html

Question

I'm struggling to achieve responsive column. Currently all columns are not the same height. When the screen gets smaller, the paragraphs are not the same level, I am trying to make them the same level no matter what screen size. My next problem is the button will also not be the same level in all columns.
Bellow is currently my HTML:
<div class="container">
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /> <h2>Fencing and Gates</h2>
<h2>test heading text long</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text longer </h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text longer longer </h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>Block Paved Driveways and Paths</h2>
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
</div>
Below is my CSS:
.container:after { /*clear float*/
content: "";
display: table;
width: 100%;
clear: both;
}
.container {
margin-left: 100px;
margin-right: 100px;
text-align: center;
padding-top: 30px;
}
.section {
float: left;
width: 33.3333%;
padding-bottom: 50px;
border: 1px solid;
box-sizing: border-box;
display: table-cell;
}
.section p {
padding-bottom: 50px;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
padding-left: 25px;
padding-right: 25px;
}
.section h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
#media (max-width: 768px) {
.section {
float: none;
width: auto;
}
}
below is a js fiddle of what I currently have
https://jsfiddle.net/b147rmdh/
Any help on this would be greatly appreciated!

Answer 1

You need to specify a height for each column for them to all be the same height. If you don't then the columns will size themselves based on the amount of content they contain (which is currently what is happening in your code). More specifically relating to your code, if you add a specific height to your .section class, then all the columns should be the same height.
Once you have done this, you could use absolute positioning on all of the elements within the columns (the headers, paragraphs, buttons, etc) so that they all line up. If you aren't very familiar with absolute positioning and the position property in general, here is a great reference that explains positioning well. Definitely recommend giving it a read and taking the time to get a good understanding of positioning since it's one of the most fundamental CSS skills.

Answer 2

I'd suggest a Flexbox with wrapping.
.container {
display: flex;
flex-wrap: wrap;
}
.section {
width: 33.3333%;
}
Once you've done that, you can use a similar method vertically if you wrap the upper content in one element and keep the button separate. Set your flex-direction to column and justify-content to space-between.