Выравнивание двух элементов контейнера с помощью CSS

Question

Я хочу выровнять внутренние элементы, не используя фиксированную высоту (или одинаково) и не нарушая семантику (она должна быть правильно структурирована / верстка (html)).

Лучше увидеть пример, чтобы понятьчто я пытаюсь сделать.

https://jsfiddle.net/5oth3xag/

HTML:

<div class="list">

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p></p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

</div>

CSS:

html,body,div,h2 {margin:0; padding:0;}
.list {
  display: flex;
  justify-content: center;
}
.item {
  max-width: 200px;
}
.heading {

}
.para {

}
.something_else {
  color: red;
}
.link {

}

Я хочу This needed to be aligned чтобы быть в соответствии с пунктом рядом с ним.Очевидно, если они будут одинаковыми - так и будет.Но как только что-то изменилось, оно тормозит.Например:

<div class="list">

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

</div>

Итак, я хочу, чтобы This needed to be aligned был выровнен с растянутым.Я надеюсь, вы понимаете, что я имею в виду под всем этим.

Я не против использовать flexbox и т. Д., Если он будет поддерживать современные браузеры.

Возможно ли это или нет?Я хочу слишком много CSS?

Answer 1

Вы можете сделать это, используя flexbox, flex-direction и flex-grow.

Добавьте display: flex; и flex-direction: column; к вашему .item{}.

Создайте новый классдля вашего второго .para{} вроде .para2{}.

Добавьте flex-grow: 1; к .para2{} и все заработает.

Вот ваш код с модификацией.

html,body,div,h2 {margin:0; padding:0;}
.list {
  display: flex;
  justify-content: center;
}
.item {
  max-width: 200px;
  flex-direction: column;
  display: flex;
}
.heading {
  
}
.para {
  min-height: 170px;
}
.para2{
  flex-grow: 1;
}
.something_else {
  color: red;
}
.link {
  
}

<div class="list">
  
  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>
  
  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>
  
</div>