JSFiddle - React, Tailwind, and code Playground

HTML

Test<div class="logo_align_container"><!--
    --><div class="logo_wrapper">        
                <div class="logo_image">
                <img src="images/logo.png" />
                </div>
                <div class="logo_text">
                    <div class="site_name">
                    <h1>foo</h1>
                    </div>
                    <div class="site_slogan">
                    <h2>bar</h2>
                    </div>
                </div>
    </div><!--
            --></div>
            test

CSS

.logo_align_container {
    display: inline;
    text-align: center; 
   height: 400px;
   width: 300px;
   line-height: 400px;    
    background: red;
}

.logo_wrapper {
   display: inline-block;
   height:auto;
    width: 200px;
    background:pink;
    vertical-align: middle;
    line-height: 20px;
        text-align: left;
}