Aligning element height across different columns-CodePudding

I have some framework generated HTML that I am trying to style.

.row {
  display: flex;
  flex-direction: row;
}

.field {
  display: flex;
  flex-direction: column;
}

<div >
  <div >
    <label>Label</label>
    <input type="text">
  </div>
  <div >
    <label>Label<br>over two lines</label>
    <input type="text">
  </div>
  <div >
    <label>Label</label>
    <input type="text">
  </div>
</div>

I want the labels, who are always the first child of every field, to be aligned vertically and occupy the same height, as if they were in a table row. However, I cannot change the HTML structure into rows. Is this possible purely with CSS?

CodePudding user response：

you can align the row

.row {
align-items: flex-end;
}

or you can try to align the field, like that

.field {
justify-content: flex-end;
}

check both of them.

CodePudding user response：

They are theoretically equal height already. However, flex by default will be flex-start which means if something like in your case the center label overflows, it will keep all other flex children on the top.

To push them to the bottom instead which will auto align all inputs to the bottom you must set on the parent align-items: flex-end; which will push all children to the end.

.row {
  display: flex; 
  align-items: flex-end;
  gap:5px;
}

.field {
  display: flex;
  flex-direction: column; 
}