Flexbox и встроенная проблема выравнивания Twitter

Question

Я не могу заставить нижнюю часть моего сайта правильно складываться. Мне нужно, чтобы div "srun" и "mentor" находились в столбце слева, а канал Twitter - чтобы растянуть этот столбец справа. Кажется, я не могу правильно оформить макет или помешать встраиванию канала Twitter на всю страницу.

.newsbox {
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 200px;
  align-items: flex-start;
}

.newsbox .twittercontainer {
  align-self: stretch;
}

<div class="newsbox">
  <div class="srun">
    <img src="resources/sponsoredrun.jpg">
    <h1>Sponsored Run</h1>
    <h2>Six of our supporters ran 10k in Richmond on March 24th 2012 in order to raise money to help us continue our work. They had a great deal of fun and raised £1400! </h2>
  </div>
  <div class="mentor">
    <img src="resources/sponsoredrun.jpg">
    <h1>Sponsored Run 2</h1>
    <h2>Six of our supporters ran 10k in Richmond on March 24th 2012 in order to raise money to help us continue our work. They had a great deal of fun and raised £1400! </h2>
  </div>
  <div class="twittercontainer">
    <a class="twitter-timeline" href="https://twitter.com/BelongLondon?ref_src=twsrc%5Etfw">Tweets by BelongLondon</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</div>