JSFiddle - React, Tailwind, and code Playground

HTML

<div id="letterhead">
			<div class="name"></div><div class="logo"></div><div class="name"></div>
			<div class="subtext"></div>
		</div>

CSS

body{
    background:#eee;
    width: 100%;
}
#letterhead {
	position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	width: 100%;
	height: 12rem;
	font: 32px Tahoma;
	color: #777;
	padding: 2rem;
}
    	.logo {
    		display: inline-block;
    		width: 7rem;
    		height: 7rem;
    		background: #000;
            margin:0 -4px 0 0;
            vertical-align:top;
    	}
    	.name {
    		display: inline-block;
    		height: 7rem;
    		width: calc((100% - 7rem) / 2);
    		background: #fff;
            margin:0 -4px 0 0;
            vertical-align:top;
    	}
    	.subtext {
    		//position: absolute;
    		margin: 0;
    		padding: 0;
    		top: 9rem;
    		text-align: center;
    		width: 100%;
    		height: 1rem;
    		background: #555;
    	}