Align elements at bottom of div - html

Question

I want each button "Read more" of each div to be aligned in the same level (and in this case at the bottom of the div). The problem is that I don't want to give a specific height to the divs and neither change any markup or style.
I could use a bunch of pseudo class selectors but I would like to keep the code simple and maybe there's a simpler way.
Here's the working fiddle
.btn{
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;}

Answer 1

Flexbox can do that.
It will set all the columns to equal height and tell the button to be at the bottom of each column.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*::before,
*::after {
box-sizing: border-box;
}
.row {
display: flex;
}
#services {
background-color: rgb(265, 265, 265);
color: #424242;
}
#services .col-3 {
text-align: left;
float: none;
display: flex;
flex: 0 0 25%;
padding: 10px;
flex-direction: column;
}
#sevices h3 {
margin: 10px 0
}
.btn {
margin-top: auto;
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;
-webkit-transition: color 0.8s, background-color 0.8s;
transition: color 0.8s, background-color 0.8s
}
<section id="services">
<!-- Services Starts Here -->
<div class="wrapper">
<h2>SERVICES</h2>
<div class="divider"></div>
<div class="row">
<div class="col-3">
<h3>Consulting and audit</h3>
<p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
Read more
</div>
<div class="col-3">
<h3>Web Development</h3>
<p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
Read more
</div>
<div class="col-3 right-align">
<h3>Search Engine Optimization</h3>
<p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
Read more
</div>
<div class="col-3 right-align">
<h3>Pay Per Click Management</h3>
<p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
Read more
</div>
</div>
</div>
</section>

Answer 2

Assuming I've understood you correctly, I've made the following amendments:
.btn{
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;
-webkit-transition: color 0.8s, background-color 0.8s;
transition: color 0.8s, background-color 0.8s;
position: absolute;
bottom: 0px;
}
.wrapper {
position: relative;
}
added position: absolute; to your btn class
added bottom: 0px to compliment the position (again to the btn class)
added position: relative; to a wrapper class so btn knows what it is positioning itself within.
You may need to update your existing CSS to adjust to the changes.
Updated Fork:
https://jsfiddle.net/exaboofu/

Answer 3

One solution entails using flexbox and absolute positioning:
https://jsfiddle.net/aLbu6frL/6/
.row {
display: flex;
flex-direction: row;
padding-bottom:40px;
}
.column {
flex: 0 0 auto;
position: relative;
}
.btn-bottom {
position: absolute;
bottom: -40px;
left: 0px;
right: 0px;
text-align:center;
}

Answer 4

Please add some more CSS in your existing and your button align with bottom please look below CSS code:
#services .right-align h3, #services .right-align p{
text-align: right;
}
#services .right-align .btn{
text-align:left;
}
.btn{
bottom: 0;
position:absolute;
}

Answer 5

You can set p tag a min-height. I just try it and it work's for me see sample code below. You can set p tag height based on your need.
#services .row .col-3 p {
width: 100%;
height: 300px;
}