How can I make divs inside of a column equal-height? - html

Question

Problem: Divs not aligned:
The problem is when the text wraps, for example Money back guarantee, pushes the div out of alignment with 30 days.
I am trying to use the grid approach to first define two columns.
My code:
.inline-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
<div class="inline-features">
<div class="feature">
<div class="price col-1-item">
<span>
Price
</span>
</div>
<div class="money-back col-1-item">
<span>
Money back guarantee
</span>
</div>
<div class="number-of-lessons col-1-item">
<span>
Number of lessons
</span>
</div>
<div class="number-of-users col-1-item">
<span>
Number of users
</span>
</div>
<div class="country col-1-item">
<span>
Based in country
</span>
</div>
<div class="support col-1-item">
<span>
Support
</span>
</div>
<div class="video-lessons col-1-item">
<span>
Video lessons
</span>
</div>
<div class="downloadable-files col-1-item">
<span>Downloadable files</span>
</div>
</div>
<div class="feature-item">
<div class="price-item col-2-item">
<span> From xx to xx </span>
</div>
<div class="money-back-item col-2-item">
<span> 30 days </span>
</div>
<div class="number-of-lessons-item col-2-item">
<span> 300+ </span>
</div>
<div class="number-of-users-item col-2-item">
<span> 35k + </span>
</div>
<div class="country-item col-2-item">
<span> UK</span>
</div>
<div class="support-item col-2-item">
<span> 24/7 live chat support </span>
</div>
<div class="video-lessons-item col-2-item">
<span> Yes </span>
</div>
<div class="downloadable-files-item col-2-item">
<span> Yes </span>
</div>
</div>
</div>

Answer 1

Your HTML structure is not correct. Try this way.
To do this type of design, you can use table. This will be better way for manage.
.inline-features{
width: 250px;
}
.row {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.col-1-item,
.col-2-item {
border: 1px solid black;
}
<div class="inline-features">
<div class="row">
<div class="col-1-item">
<span> Price </span>
</div>
<div class="col-2-item">
<span> From xx to xx </span>
</div>
</div>
<div class="row">
<div class="col-1-item">
<span> Money back guarantee </span>
</div>
<div class="col-2-item">
<span> 30 days </span>
</div>
</div>
<div class="row">
<div class="col-1-item">
<span> Number of lessons </span>
</div>
<div class="col-2-item">
<span> 300+ </span>
</div>
</div>
</div>

Answer 2

.inline-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
font-size: 4rem;
border: 1px solid gray;
}
.col-1-item,
.col-2-item {
padding: 1rem;
height:140px;
border: 1px solid gray;
}
<div class="inline-features">
<div class="feature">
<div class="price col-1-item">
<span>Price</span>
</div>
<div class="money-back col-1-item">
<span>Money back guarantee</span>
</div>
<div class="number-of-lessons col-1-item">
<span>Number of lessons</span>
</div>
<div class="number-of-users col-1-item">
<span>Number of users</span>
</div>
<div class="country col-1-item">
<span>Based in country</span>
</div>
<div class="support col-1-item">
<span>Support</span>
</div>
<div class="video-lessons col-1-item">
<span>Video lessons</span>
</div>
<div class="downloadable-files col-1-item">
<span>Downloadable files</span>
</div>
</div>
<div class="feature-item">
<div class="price-item col-2-item">
<span>From xx to xx</span>
</div>
<div class="money-back-item col-2-item">
<span>30 days</span>
</div>
<div class="number-of-lessons-item col-2-item">
<span>300+</span>
</div>
<div class="number-of-users-item col-2-item">
<span>35k +</span>
</div>
<div class="country-item col-2-item">
<span>UK</span>
</div>
<div class="support-item col-2-item">
<span>24/7 live chat support </span>
</div>
<div class="video-lessons-item col-2-item">
<span>Yes</span>
</div>
<div class="downloadable-files-item col-2-item">
<span>Yes</span>
</div>
</div>
</div>

Answer 3

I suggest use instead of div and use CSS for border or other style
<table>
<tr>
<td>PRICE</td>
<td>From XX to XX</td>
</tr>
</table>