JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Banner-Container"> 

    <div class="dock-Wrapper">
		<div class="dock-IMG1"></div>
		<div class="dock-IMG2"></div>
	</div> 

</div>

CSS

body {margin: 0; padding: 0;}

.Banner-Container {
	width:100%;
	height:400px;
	background-image:url(images/mainBannerBG.jpg);
    background-color:black;
	z-index:-5;
	overflow:hidden;
    position:relative;
	}
	
	
.dock-Wrapper { 
	height:auto;
	width:200px;
	background:#777;
	bottom:0;
	overflow:hidden;
    margin:auto;
	position:absolute;
    left:50%;
    font-size:0px;
    margin-left:-100px;
}	

.dock-IMG1 {
	width:100px;
	height:119px;
	background-image:url(images/dock.png);
	display:inline-block;
    background-color:blue;

	}
	
.dock-IMG2 {
	width:100px;
	height:119px;
	background-image:url(images/dock.png);
	display:inline-block;
    background-color:red;
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
	}