JSFiddle - React, Tailwind, and code Playground

by ethereal1m

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

#banner-wrapper {
		order: 1;
         height: 70.7833px;
         width:40px;
		 margin-left: 5%;
    }
	img {
		width: 40%;
	}
	
	@media all and (min-width: 360px) {
		#banner-wrapper {
			flex: 2 1 auto;
		}
		#peoplefind-sidebar {
			flex: 2 1 auto;
		}
	}
	
	@media all and (min-width: 360px) {
		#banner-wrapper, #banner-wrapper>* {
			order: 1;
		}
		#peoplefind-sidebar,#peoplefind-sidebar > *,.people-search   {
			order: 2;
		}
	}
	
	#header-wrapper {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		display: -webkit-flex;
		position: relative;
		z-index: 0;
	}
	
	#peoplefind-sidebar {
        display: -webkit-flex;
		display: flex;
    }
	
	.people-search {
		top: 50%;
		height: 35%;
		width: 22% !important;
		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: 30%;
		left: 80%;
	}