I'm facing a challenge in properly aligning 3 div elements without resorting to adding padding at the bottom of the wrapping div, which isn't the most practical solution.
How would you suggest addressing this particular problem?
HTML
<section class="audience">
<div class="container">
<div class="audience_col1">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
<div class="audience_col2">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
<div class="audience_col3">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
</div>
</section>
CSS
.audience{
width: 100%;
background-color: #f6f5fa;
height: auto;
overflow:auto;
text-align:center;
padding: 20px 0 20px 0;
}
.audience_col1{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}
.audience_col2{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}
.audience_col3{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}