Align contents vertically in middle of flexed div

Question

I would like to align the contents of div in the middle of vertical alignment. Table-cell will not function here, due to the fact, that parent is and must be displayed flex. This is used in the new WordPress Gutenberg editor. I do not want to modify the editor itself if possible and achieve this with CSS alone. Below you will find how the code looks currently. Custom HTML also cannot be added without editing editor. Is there a possibility of this be achieved in the current state?

Desired result:

Current code and state: JSFiddle

HTML:

<div class="wp-block-columns has-2-columns right-33">
  <div class="wp-block-column">
     <h3>Some title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>
   <div class="wp-block-column">
     <figure class="wp-block-image">Here be image</figure>
   </div>
 </div>

CSS:

h3 {margin: 0 0 20px 0;}
.wp-block-columns {
    display: flex;
    flex-wrap: no-wrap;
    padding: 5px;
    border: solid 1px red;
}
.wp-block-column {
    flex: 1;
    margin-bottom: 1em;
    flex-basis: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    flex-grow: 0;
    border: solid 1px blue;
}
.right-33 > div:first-child {
    flex-basis: 66.6666%;
    margin-right: 32px;
}
.right-33 > div:last-child {
    flex-basis: 33.3333%;
    margin-left: 32px;
}
.wp-block-image {
  background: green;
  margin: 0 auto;
  width: 100%;
  height: 200px;
}

Answer 1

You can add this to your wp-block-column column:

.wp-block-column {    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Here's your updated JSFiddle.

This is a great visual guide on Flexbox, it might help you in the future.