<div class="card-list">
  
  <div class="card">
    <div class="card__img">
      <img src="#" alt="">
    </div>
    <div class="card__content">
      <div class="card__content-top">
        <h1>Heading</h1>
        <p class="descr">Description</p>
      </div>
      <div class="card__time">10 01 2018</div>
    </div>
  </div>

  <div class="card">
    <div class="card__img">
      <img src="#" alt="">
    </div>
    <div class="card__content">
      <div class="card__content-top">
        <h1>Heading</h1>
        <p class="descr">Description Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque vero quibusdam iure laudantium eaque suscipit incidunt nihil culpa soluta, excepturi dolor debitis optio sapiente, aut unde? Quaerat odio nobis fuga!</p>
      </div>
      <div class="card__time">10 01 2018</div>
    </div>
  </div>

</div>
* {
  box-sizing: border-box;
}
div {
  outline: 1px dotted red;
  outline-offset: -1px;
}

.card-list {
    display: flex;
    flex-wrap: wrap;
}

.card {
  width: 400px;
  display: flex;
  flex-direction: column;
  
  &-list { // не надо так писать вложенность
    // это совершенно другой блок, не имеющий
    // отношения к card
  }
  
  &__img {
    height: 200px;
    background-color: yellow;
  }
  
  &__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
    
    &__time {
      color: red;
      text-align: right;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.