0

I have code that makes columns. In this column I will have text, but text won't be same height, is there a way make the columns in div to have height same as tallest column?

.col-3 {
  width: 30%;
  margin: auto;
  text-align: center;
  display: inline-block;
  height: inherit;
}
col .fa {
  display: block;
  color: $black;
  margin-bottom: 5%;
}
<div class="container">
  <div class="col-3"><i class="fa fa-tint fa-5x" aria-hidden="true">pic</i><br>Hello user!</div>
  <div class="col-3"><i class="fa fa-home fa-5x" aria-hidden="true">pic</i><br></div>
  <div class="col-3"><i class="fa fa-map-marker fa-5x" aria-hidden="true">pic</i><br>Test</div>
</div>

And i don't want to use any bootstrap.

PS. I know this fiddle has other reason, but actually I'm using Font Awesome and it look like there (but in MY code there's no <br>).

Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
Kacper
  • 111
  • 1
  • 13

1 Answers1

2

You can use Flexbox to do this

.container {
  display: flex;
}
.col-3 {
  flex: 1;
  border: 1px solid black;
  margin: 5px;
}
<div class="container">
  <div class="col-3"><i class="fa fa-tint fa-5x" aria-hidden="true">pic</i><br>Hello user!</div>
  <div class="col-3"><i class="fa fa-home fa-5x" aria-hidden="true">pic</i><br></div>
  <div class="col-3"><i class="fa fa-map-marker fa-5x" aria-hidden="true">pic</i><br>Test</div>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176