How to make bottom-border of two parallel divs align-CodePudding

I would like the lines at the bottom of each div/bottom border to align. When text on one side is longer than the other, the bottom border looks disjointed.

.one {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 5%;
}

.inner {
  padding: 5px;
  width: 100%;
}

.two {
  padding: 5px;
}

.innerTxt {
  width: 90%;
  border-bottom: 2px solid blue;
}

<div >
  <div >
    <img src="https://via.placeholder.com/370x236">
    <div >
      <h4>Wings</h4>
      <p>Lorem Ipsum. This text is shorter</p>
    </div>
  </div>
  <div >
    <img src="https://via.placeholder.com/370x236">
    <div >
      <h4>Other</h4>
      <p>Some other text on this page that happens to be longer than the previous</p>
    </div>
  </div>
</div>

CodePudding user response：

A height style can be applied to the <p> element if the content inside the <p> element is not dynamic.

.one {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 5%;
  }
.inner {
    padding: 5px;
    width: 100%;
}

.two {
     padding: 5px;
}

.innerTxt {
    width: 90%;
    border-bottom: 2px solid blue;
}

p {
  height: 50px;
}

<div class = "one">
  <div >
    <img src="https://via.placeholder.com/370x236">
    <div >
      <h4>Wings</h4>
      <p>Lorem Ipsum. This text is shorter</p>
    </div>
  </div>
  
  <div >
    <img src="https://via.placeholder.com/370x236">
    <div >
      <h4>Other</h4>
      <p>Some other text on this page that happens to be longer than the previous</p>
    </div>
  </div>
</div>

CodePudding user response：

You could use an absolutely-positioned pseudo element to draw the border while maintaining the 90% width of innerTxt.

Because the flex elements are stretched vertically they'll be aligned at the bottom.

.one {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 5%;
}

.inner {
  padding: 5px;
  width: 100%;
}

.two {
  padding: 5px;
}

.innerTxt {
  width: 90%;
}

.one>* {
  position: relative;
}

.one>*::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 2px solid blue;
  display: block;
  width: 90%;
}

<div >
  <div >
    <img src="https://via.placeholder.com/370x236">
    <div >
      <h4>Wings</h4>
      <p>Lorem Ipsum. This text is shorter</p>
    </div>
  </div>

  <div >
    <img src="https://via.placeholder.com/370x236">
    <div >
      <h4>Other</h4>
      <p>Some other text on this page that happens to be longer than the previous</p>
    </div>
  </div>
</div>

CodePudding user response：

try adding to the .inner div align-self: flex-end;

.inner{
    align-self: flex-end;
}

or to the parent div :

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