HTML - How to align box vertically with words inside [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
I would like to align the boxes vertically. It works fine if the words in the box is all in one line. However if the words in one of the box goes to 2 lines or more the box will not align properly.
.col {
display: inline-block;
width: 31%;
padding: 2px 5px;
}
.box {
height: 80px;
margin: 0 auto;
display: flex;
background-color: #f4f4f4;
justify-content: center;
align-items: center;
font-size: 20px;
text-decoration: none;
font-weight: normal;
}
<div class="col">
<div class="box">Box</div>
</div>
<div class="col">
<div class="box">This is a box</div>
</div>
<div class="col">
<div class="box">Please see inside this box for some contents to read</div>
</div>

Answer 1

you can use flex box to easily avoid this issue.
put all cols in a flex wrapper.
<div class="wrapper">
<div class ="col">
<div class="box">Box</div>
</div>
<div class ="col">
<div class="box">This is a box</div>
</div>
<div class ="col">
<div class="box">Please see inside this box for some contents to read</div>
</div>
</div>
.wrapper{
display: flex;
}

Answer 2

Its because the <div class="box"> overflow with content.
you could adjust class .box height and add some padding to align them right properly.
.box {
height: 80px;
margin: 0 auto;
display: flex;
background-color: #f4f4f4;
justify-content: center;
align-items: center;
font-size: 20px;
text-decoration: none;
font-weight: normal;
height: 100%;
padding: 28px;
}
Heres an example https://codepen.io/mcfaith9/pen/vYmJvLK

Answer 3

Add a flex parent .row which will contain your col cell columns
/*QuickReset*/ * {margin:0; box-sizing:border-box;}
.row {
display: flex;
}
.col {
display: flex;
flex-direction: column;
}
.cell-4 {
flex: 1 1 33.333%;
}
.box {
padding: 10px;
border: 1px solid #aaa;
background-color: #f4f4f4;
min-height: 80px;
}
<div class="row">
<div class="col cell-4">
<div class="box">Box</div>
</div>
<div class="col cell-4">
<div class="box">This is a box</div>
</div>
<div class="col cell-4">
<div class="box">Please see inside this box for some contents to read</div>
</div>
</div>