JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-wrapper">
		<div id="banner-wrapper">
			<img class="nav-logo-image" id="logo-img" src="http://images.freeimages.com/images/previews/ba3/sunflowers-3-1393952.jpg" alt="logo">
		</div>
		<div id="peoplefind-sidebar">
			<form id="peoplefind-form" action="peoplefind/profile" method="post">
				<input autocomplete="off" id="peoplefind-input" class="people-search" placeholder="Find contacts, item_id, and word search here" name="people_search"  type="text">
				<input id="peoplefind-input-x" class="people-search" name="people_search" disabled="disabled"  type="text">
				<button id="side-peoplefind-submit" type="submit">Find</button>
			</form>
		</div>
    </div>

CSS

#header-wrapper {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

#banner-wrapper {
    height: 70.7833px;
    width: 40px;
    margin-left: 5%;
    flex: 2 1 auto;
}

img {
    width: 40%;
}
	
#peoplefind-sidebar {
    position: relative;
    flex: 2 1 auto;
    height: 70.7833px;
}
	
.people-search {
    top: 50%;
	height: 25px;
    width: 180px;
	border: 1px solid #666;
	border-radius: 3px;
	padding: 3px;
	position: absolute;
	}

#peoplefind-input {
    background: transparent;
    z-index: 1;
}
	
#peoplefind-input-x {
	color: #CCC; background: transparent; 
}
	
#side-peoplefind-submit {
	position: absolute; 
	top: 50%;
	height: 30px;
	right: 0%;
}

@media all and ( max-width: 500px ) {
    #header-wrapper { flex-direction: column; }
    img { width: 100%; }
    .people-search { width: 50%; top: 0; left: 0; }
    #side-peoplefind-submit { width: 50%; bottom: 0; left: 0; }
}