JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topjob">
   <div id="left">
		<ul>
			<li><a href="#"><i class=""></i>LOGIN</a></li>
			<li><a href="#"><i class=""></i>REGISTER</a></li>
		</ul>
	</div>
	<div id="right">
		<ul>
			<li><a href="index.html"><img src="images/mastercard.png" alt="" /></a>
			<li><a href="index.html"><img src="images/visa.png" alt="" /></a>
		</ul>
	 </div>
</div>

CSS

#topjob {
	display: flex;
	justify-content: center;
	position: relative;
}

#left {
	width:500px;
    height: 50px;
    background: #ff0000;
}

#right {
    width:100px;
    height: 50px;
    background: #00ff00;
	position: absolute;
	right: 2%;
}

#left > ul,
#right > ul {
	display: flex;
	justify-content: flex-start;
	list-style-type: none;
	padding: 0;
}

#left > ul li,
#right > ul li {
	margin: 10px;
}