Align contents vertically in middle of flexed div - html

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.

Answer 2

Create a column flexbox to .right-33>div:first-child and align to center using justify-content: center - see demo below:
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;
/*ADDED FLEXBOX*/
display: flex;
flex-direction: column;
justify-content: center;
}
.right-33>div:last-child {
flex-basis: 33.3333%;
margin-left: 32px;
}
.wp-block-image {
background: green;
margin: 0 auto;
width: 100%;
height: 200px;
}
<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>

Answer 3

The setting to use for vertically centered alignment of flex children is align-items: center;, applied to the flex container. I added it to your code here (at the end of the CSS section):
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;
}
.wp-block-columns.has-2-columns.right-33 {
align-items: center;
}
<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>