0

I have the following HTML markup:

<div class="row">
  <div class="col">
    <div>lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
    <div>sit</div>
    <div>amet</div>
  </div>
  <div class="col">
    <div>lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
    <div><button>sit</button></div>
    <div><button>amet</button></div>
  </div>
</div>

and the following styling:

.row {
  display: flex;
}

.col {
  width: 50%;
}

.col > * {
  padding: 5px;
  border-bottom: 1px solid red;
}

Which gives me a result like this:

enter image description here

As you might see, the borders don't line up between the last two children across the columns due to the height of the buttons. I realize I could solve this by setting a fixed height, but I was hoping for a more flexible solution that would work without knowing things like the height of a button in advance. How can I make sure (flexibly) that all lines have the same height?

user966939
  • 692
  • 8
  • 27
  • 1
    do you really want to flex or can you try other options too like `table` – Viira Oct 09 '21 at 09:46
  • @Viira flex would be better than `table` as the markup structure is important. Out of curiosity though, I did try simply setting `.row` to `display: table` and add `display: table-cell` to `.col`, but I actually got the same results.. Maybe I'm doing something wrong. – user966939 Oct 09 '21 at 10:07

0 Answers0