Vertical-Center DIV next to a table

I am having trouble centering a DIV next to a table within a DIV. I have set the style of DIV and a table as inline-block and inline accordingly, but what happens is that the DIV is placed at the bottom of the table instead of center - level of the table (goal is to align it between "6" and "24"). Requirement is for it to work with the format being responsive.

Here is my code written within the JSFiddle.

<div class="Dboxes" style="color:white;">
<span class="Title"> Title </span><br>
<span class="Value" style="display:inline-block; background:orange;"> <img id="PPMain" class="MainImg" src="img/grnsqr.png" /> ## </span>

<table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>

</div>

Help will be very appreciated, thank you very much

Also, link is right here https://jsfiddle.net/k3388j0w/1/

Solution

Does this answer your question?

http://codepen.io/mwvanmeurs/pen/GpwMZr

And btw, setting a table to display: inline-block is probably a bad idea.

.container {
  display: flex;
  align-items: center;
}
    <div class="container">
<table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>
  <div class="other-div">
    <h1>Hey There!</h1>
  </div>
</div>