title: Get text aligned at bottom div
body: <p><a href="https://jsfiddle.net/uj7ru281/" rel="nofollow noreferrer">Link to project</a></p>
  
  <p>I've have finally managed to get the header layout I want but one thing I can't get done and that is the alignment of the text (h2 and h3) in the left sidebar. I have tried to do it with a fixed proportie but it get side-effects and I think it has something to do with the rotated text.</p>
  
  <p>The main title should be in left bottom, on one line and the date should be on the right of the main title also on one line. Those combined must align at center of the side-main text aligned to the left. </p>
  
  <p>Edit: <a href="https://imgur.com/OvHNoTp" rel="nofollow noreferrer">Link to layout</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
  }
  
  .wrapper-header {
    display: flex;
    background: linear-gradient(to right bottom, #F33C12, #F28BB8);
  }
  
  .top-nav {
    position: fixed;
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, .2);
  }
  
  .side-main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    margin-top: 60px;
    width: 70px;
    border-right: 1px rgba(255, 255, 255, .2) solid;
  }
  
  .agenda-text {
    width: 100%;
    color: #FFF;
    transform: rotate(-90deg);
    text-transform: uppercase;
  }
  
  .header-main {
    display: flex;
    height: calc(100vh - 60px);
    margin-top: 60px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Rataplan Improvisatietheater&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="top-nav"&gt;
      nav
    &lt;/div&gt;
    &lt;div class="wrapper-header"&gt;
      &lt;div class="side-main"&gt;
        &lt;h2 class="agenda-text"&gt;Main Title Event&lt;/h2&gt;
        &lt;h3 class="agenda-text"&gt;Event date 1 (month) 2018&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="header-main"&gt;
        main
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="wrapper-content"&gt;
      &lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Many thanks in advance!</p>
  
  <p>Hope you can help me out.</p>
  
  <p>Regards,
  Jason </p>