JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="interface">
	<div id="fileNavigation">
		<div id="dirNavigation">
			<div id="back"><img src="../icons/arrows/arrowleft32.png"></div>
			<div id="parentDir"><img src="../icons/arrows/arrowup32.png"></div>
			<div id="forward"><img src="../icons/arrows/arrowright32.png"></div>
		</div>
		<div id="currentLocation">File location/File location/File location/File location/File location/File location/File location/File location/File location/File location/File location/File location/File location/</div>
		<div id="search">
			<input type="text" id="searchFiles" placeholder="Search">
		</div>
	</div>
</div>

CSS

#fileNavigation{
		width:100%;
		font-size:0;
	}
	#dirNavigation{
		font-size:0;
		display:inline-block;
		vertical-align: middle;
	}
	#dirNavigation div{
		display:inline-block;
    	box-shadow: 0 0 2px #000;
    	-o-transition:box-shadow .3s;
    	-moz-transition:box-shadow .3s;
    	-webkit-transition:box-shadow .3s;
    	-ms-transition:box-shadow .3s;
    	transition:box-shadow .3s;
	}
	#dirNavigation div:hover{
		box-shadow:none;
	}
	#interface{
		-o-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box;
		padding:5vw;
	}
	#currentLocation{
		vertical-align: middle;
		height:100%;
		display: inline-block;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    	width:auto;
    	font-size:1rem;
	}
	*{
		margin:0 !important;
	}
	#search{
		display:inline-block;
	}