How to match height of borders?

Question

I would like to have the height of the right borders of several div blocks to match. The blocks contain different number of lines of text.

As you can see, the right borders don't match in height:

.options {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  border-right: 1px #d0d2d3 solid;
  display: inline-block;
  width: 50px;
  text-align: center;
  vertical-align: middle
}

.list {
  display: inline-block
}

<html>

<div class="list">
  <div class="options">
    text
  </div>
  <div class="options">
    long text
  </div>
  <div class="options">
    long long text
  </div>
</div>

Anyone know how that can be done?

See this solution: https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height — Mor Shemesh, Aug 19 '18 at 14:42
@MorShemesh But if I have `display: flex`, the text won't be vertically aligned. — John M., Aug 19 '18 at 15:40

score 0 · Accepted Answer · answered Aug 19 '18 at 14:42

0

You can use display: table-cell;

.options { 
    ...
    display: table-cell;
}

answered Aug 19 '18 at 14:42

Programmer

1,973
1
12
20

How to match height of borders?

1 Answers1