JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="index-block cta row">
	<div class="col-md-4 brand">
		<img src="http://placehold.it/400x400" alt="" />
	</div>
	<div class="col-md-8 search">
		<h1>Property Experts<br><small>Neighborhood Enthusiasts</small></h1>
		<hr>
		<search-form></search-form>
		<div class="button-group">
			<a class="btn btn-primary" href="/leads/buy"><span>Buying a home?</span></a>
			<a class="btn btn-primary" href="/leads/sell"><span>Selling a home?</span></a>
			<a class="btn btn-primary" href="/leads/cma"><span>What's my home worth?</span></a>
		</div>
	</div>
</div>

CSS

.brand img {
    width: 100%;
}

JavaScript

$(document).ready(function() {
	$('.search').css({
		'padding-top': ($('.brand').height() - $('.search').height()) / 4 + "px",
        'padding-bottom': ($('.brand').height() - $('.search').height()) / 4 + "px",
	});
    alert('brand: ' + $('.brand').height() + ' | search: ' + $('.search').height());
});