JSFiddle - React, Tailwind, and code Playground

HTML

<div class="orange">
    <div class="blue">
        <p>This div is the blue div</p>
    </div>
    <div class="green">
        <p>This div is the green div, and should be vertically center aligned of the blue div</p>
    </div>
    <div class="clear"></div>
</div>

CSS

/* CONTAINER */
div.orange {
    background-color: #ffeecc;
}

/* BIG DIV */
div.blue {
    background-color: #ccccff;
    float: left;
    height: 200px; /* SETTING HEIGHT FOR THIS EXAMPLE, CHANGE TO SEE THE MAGIC HAPPEN */
    width: 75%;
}

/* SMALL ALIGNED DIV */
div.green {
    background-color: #ccffcc;
    float: left;
    height: 100px; /* SETTING HEIGHT FOR THIS EXAMPLE */
    width: 25%;
}

div.clear { clear: both; } /* FLOAT CLEAR FIX */

JavaScript

// PLEASE NOTE THAT THIS SCRIPT IS LOADED WHEN THE BODY IS READY LOADING

var center = $('div.blue').outerHeight(true) / 2; // get the center
var margin = center - $('div.green').height() / 2;

$('div.green').css({
    'margin-top': margin
});