JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-item">
	<div style="background-color: gray;" id="tod-header">
		<div>
			<div style="float: left;" id="tod-title">
				<img style="max-width: 400px; height: 134px;" src="http://i.imgur.com/rJBx6.jpg" alt="A Random Image">
			</div>
      <div style="float: left; min-height: 134px; padding-left: 50px;">
           <!-- Poor man's separator between columns -->
      </div>
			<div style="float: left; min-height: 134px;">
					  <!-- I want to place two divs here..
                 each div will have an image that will be
                 vertically and horizontally centered in the div 
            -->
            <div id="callout_1" style="border: 1px blue; min-height: 134px;">              Hello
            </div>
        
            <div id="callout_2">              
            </div>
        
        </div>
			</div>
			<!-- This is a hack to allow gray background to fill header -->
			<div style="min-height: 134px;">
			</div>
		</div>
	</div>
</div>

CSS

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:    #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:    #666;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:    #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:    #666;
}