Equal height
Purpose
Equalize the height of elements on the same baseline.
Example
Short container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Medium container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Long container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.
Short container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Medium container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Long container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.
Short container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Medium container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Long container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.
Code
HTML
<div class="wb-eqht">
<section>
<h3>Short container</h3>
...
</section>
<section>
<h3>Medium container</h3>
...
</section>
<section>
<h3>Long container</h3>
...
</section>
</div>
<div class="wb-eqht">
<section>
<h3>Short container</h3>
...
</section>
<section>
<h3>Medium container</h3>
...
</section>
<section>
<h3>Long container</h3>
...
</section>
<section>
<h3>Short container</h3>
...
</section>
<section>
<h3>Medium container</h3>
...
</section>
<section>
<h3>Long container</h3>
...
</section>
</div>CSS
.wb-eqht section {
display: inline-block;
margin-bottom: 15px;
padding: 15px;
width: 100%;
}
@media (min-width: 768px) {
.wb-eqht section {
width: 49%;
}
}
@media (min-width: 1200px) {
.wb-eqht section {
width: 33%;
}
}Nested Example
Column 1
Column 1
- test
- test
- test
- test
- test
Column 2
Column 2
- test
- test
- test
- test
- test
- test
- test
- test
- test
Column 3
Column 3
- test
- test
Column 1
Column 1
- test
- test
- test
- test
- test
- Date modified: