CSS how to make the distance of the content inside two flexbox columns equal

Question

I have two flexbox-columns

<div class="container">
   <div class="left">
      <div>
         <h1>This is some long title on two lines</h1>
      </div>
      <div>
         <p>This is some text</p>
      </div>
      <div>
        <button>
           this is some button 
       </button>
     </div>
  </div>
  <div class="right">
    <div>
       <h1>This is some title</h1>
    </div>
    <div>
       <p>This is some text</p>
    </div>
    <div>
      <button>
        this is some button 
      </button>
   </div>
 </div>
</div>

and the css:

.container {
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}

.left {
  flex:1;
  border:1px solid #000
 }

.right {
  flex:1;
  border:1px solid #000
 }

The issue is, that when one of the <h1> is a bit longer, the height of the two columns is completely off. On large screens it works ok, but on "normal" screens the problem appears.

I´ve created a FIDDLE for it.

What I want to achieve, is that the <button always stays at the bottom, and the text fields start at the same position.

Can someone maybe help me out?