Размещать элементы в одну строку независимо от содержания

Question

У меня есть 3 div с некоторым содержанием, и я должен поместить ссылки (отмеченные красным) в одну строку независимо от того, какой длины будет текст. Они всегда должны оставаться на одной линии.

использование flexbox обязательно свойство flex-end, похоже, не помогает

вот как это должно выглядеть

.tl {
  m-w: 1200px;
  display: flex;
  color: #000;
  margin-top: 70px;
  justify-content: space-evenly;
  padding-left: 18px;
  /* padding-top: 30px; */
}

.tile {
  text-align: left;
  padding-left: 40px;
  margin-top: 0px;
  padding-top: 0px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}

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

<div class="tiles">
  <div class="container tl">
    <div class="tile chart">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
      <a href="#" class="plus">+</a>
    </div>
    <div class="tile pad">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing adustry's standard dummy text ever since the 1500s, xt ext ever since the 1500s,ver since the 1500s,when an unknown printer took a galley of type and scrambled it to makemy text ever since the 1500</p>
    </div>
    <div class="tile cloud">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
      <a href="#" class="plus"></a>
    </div>
  </div>

Answer 1

Добавление flex: 1 к тегу p для описания должно помочь.Это заставляет описание занимать все доступное пространство внутри контейнера, нажимая символ «плюс» до самого дна.

.tl{
     m-w:1200px;
     display: flex;
     color: #000;
     margin-top: 70px;
     justify-content: space-evenly;
     padding-left: 18px;
   /* padding-top: 30px; */
}
.tile{
    text-align: left;
    padding-left: 40px;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.tile p {
    flex: 1
 }
.plus{
    align-self: flex-end;
}

<div class="tiles">
<div class="container tl">
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply duesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply dummy tee 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
</div>

Answer 2

Вы не можете выровнять элементы, которые не имеют общего родителя, но что вы можете сделать, это нажать каждый «плюс» в нижней части каждой плитки.

Просто примените margin-top: auto;к элементам «плюс».

Поскольку все плитки имеют одинаковую высоту, элементы «плюс» выстраиваются в ряд.

.tl {
  width: 80%;
  margin: auto;
  display: flex;
  color: #000;
  margin-top: 70px;
  justify-content: space-evenly;
  padding-left: 18px;
  /* padding-top: 30px; */
}

.tile {
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  padding-top: 0px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid green;
}

.plus {
  align-self: flex-end;
  padding: 1em;
  background: red;
  margin-top: auto;
}

<div class="tiles">
  <div class="container tl">
    <div class="tile chart">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
      <a href="#" class="plus">+</a>
    </div>
    <div class="tile pad">
      <h3>SEO Optimized</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa animi ea commodi autem aspernatur dolores aliquam vel illo, voluptatum magni aperiam quibusdam blanditiis cum laboriosam earum, exercitationem rerum. Error, deleniti sequi quod repellendus
        ducimus excepturi inventore aliquam impedit doloribus reprehenderit beatae obcaecati voluptates voluptas, ut fuga dignissimos culpa? Explicabo aperiam expedita nulla unde sed asperiores nostrum iure reiciendis qui aliquam id doloribus vel officiis
        modi iusto mollitia, eum at, libero et dolore facilis suscipit dicta aspernatur corporis?</p><a href="#" class="plus">+</a>
    </div>
    <div class="tile cloud">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
      <a href="#" class="plus">+</a></div>
  </div>