booster-bem

html

<section class="feed">
  <div class="feed__item">
    <div class="feed__item__image">
      <img src="https://pbs.twimg.com/profile_images/378800000703912809/95cb11a8f7c2832b5de07055e3ff66b2.png">
    </div>
    <div class="feed__item__content">
      <h2>Marius Hauken</h2>
      <p>Naming CSS-classes sucks, but it's worth doing properly and think a lot about!</p>
    </div>
    <time class="feed__item__desc">03.03</time>
  </div>
</section>

scss

.feed__item {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px 15px 10px 15px;
    margin-top: 10px;
    &:first-child {margin-top: 0;}
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    h2 {
        line-height: 60px;
        color: #a4c921;
    }
    time {
        line-height: 60px;
    }
}

.feed__item__image {
    flex: 0 0 auto;
    img {
        margin: 0 20px;
        width: 60px;
        height: 60px;
        border: 1px solid white;
        border-radius: 30px;
    }
}

.feed__item__content {
    flex: 0 1 auto;
}

.feed__item__desc {
    flex: 1 0 80px;
}