Выравнивание блоков на одном уровне

[four17]

Можно ли с помощью css выровнять блоки одинакового по уровню ? 

вот картинка.

 

Высота блока должна быть не фиксированной .Контент может быть  в любом количестве . Блоки с контентом должны быть на одном уровне .  Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим  описание  , цена на одном уровне с ценой.

Каким способом можно реализовать данное решение ? спасибо за внимание.

[npofopr]

Через флексы попробуйте. 

Как то вообще пробовали?

[four17]

да пробовал через флекс .не получается . и в инете решения пока не нашел . 

[npofopr]

Примерно вот такой принцип. https://codyhouse.co/ds/components/app/pricing-table
Единственное, заголовку придётся высоту указывать. И я бы ещё поставил text-overflow: ellipsis

Т.е. обычный flex, последнему элементу margin-top: auto; чтобы к низу прибивался. 

Или можно описание растягивать. flex-grow: 3; например, указать. Как нибудь так. 

[four17]

по идее вообще не тот принцип )

[AlexZaw]

4 часа назад, four17 сказал:

да пробовал через флекс .не получается

Плохо пробовали. :)  Черновой вариант:

<div class="wrap">
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempore incidunt obcaecati impedit nihil consequatur numquam magni perferendis, quasi voluptatem fugit ex iusto adipisci perspiciatis quos et, accusantium deleniti non.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
</div>

.wrap {
  display: flex;
}
.card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-basis: 200px;
  border: 1px solid #000;
  justify-content: space-between;
  align-items: center;
}
.card_price {
  display: flex;
  flex-direction: column;
  align-items: center;
}

 

[four17]

10 минут назад, AlexZaw сказал:

Плохо пробовали. :)  Черновой вариант:

<div class="wrap">
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempore incidunt obcaecati impedit nihil consequatur numquam magni perferendis, quasi voluptatem fugit ex iusto adipisci perspiciatis quos et, accusantium deleniti non.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
</div>

.wrap {
  display: flex;
}
.card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-basis: 200px;
  border: 1px solid #000;
  justify-content: space-between;
  align-items: center;
}
.card_price {
  display: flex;
  flex-direction: column;
  align-items: center;
}

 

Спасибо , но  такой результат у меня тоже получался  ))

А нужно чтобы например описание было на одном уровне с другим описание и выровнялась к топу. как то так(

  

[AlexZaw]

20 минут назад, four17 сказал:

А нужно чтобы например описание было на одном уровне с другим описание и выровнялась к топу.

Тогда попробуйте грид. Ну либо задайте для заголовка минимальную высоту.