Responsive Quote Tweet: http://codepen.io/cameronhunter/pen/bdPvpO?editors=110

Identity.css

/**
 * Identity
 *
 * 1. Ensure that the parent container has a max-width of 0 to
 *    guarantee correct text-overflow behavior in small widths.
 */

:root {
  --Identity-avatar-size: 32px;
}

.Identity {
  display: flex;
  min-width: inherit; /* 1 */
}

.Identity-avatar {
  flex-shrink: 0;
  width: var(--Identity-avatar-size);
}

.Identity-details {
  display: flex;
  flex-wrap: wrap;
  min-width: inherit;
  flex-grow: 1;
  align-items: center;
}

QuoteTweet.css

/**
 * QuoteTweet
 *
 * A tweet template that is horizontal when space is available and collapses
 * to a vertical stack when horizontal space is limited.
 *
 * 1. Flex items won't shrink below their minimum content size. To change this
 *    we set the min width to 0.
 */

:root {
  --QuoteTweet-minWidth: 150px;
}

.QuoteTweet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  min-width: var(--QuoteTweet-minWidth);
}

.QuoteTweet-details {
  display: flex;
  align-items: center;
  flex-basis: 100%;
}

.QuoteTweet-identity {
  flex-grow: 1;
  min-width: 0; /* 1 */
}

.QuoteTweet-media {
  min-width: inherit;
  flex-basis: 50%;
  flex-grow: 1;
}

.QuoteTweet-text {
  word-break: break-word;
  flex-basis: 50%;
  flex-grow: 1;
}

template.html

<div style="max-width: 350px">
  <div class="QuoteTweet">
    <div class="QuoteTweet-details">
      <div class="QuoteTweet-identity">
        <div class="Identity">
          <div class="Identity-avatar">
            <img class="u-sizeFull" src="https://pbs.twimg.com/profile_images/438402304840974336/ExlEDxK7.jpeg" />
          </div>
          <div class="Identity-details">
            <span class="Identity-name u-overflowEllipsis">Cameron Hunter</span>
            <span class="Identity-username u-overflowEllipsis">@cameronhunter</span>
          </div>
        </div>
      </div>
      <span class="QuoteTweet-timestamp">17h</span>
    </div>
    <div class="QuoteTweet-media">
      <img class="u-sizeFull" src="https://pbs.twimg.com/media/CMV66nSUsAAXQSa.jpg" />
    </div>
    <div class="QuoteTweet-text">
      Impromptu endurance karting is HARD but FUN — with @dwjr, @natbolton, and @necolas
    </div>
  </div>
</div>

Utils.css

.u-overflowEllipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.u-sizeFull {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
}