JSFiddle - React, Tailwind, and code Playground

HTML

<div class="game">
	<div class="hand" id="enemy">
	</div>
	<div class="table">
		<div class="deck">
		</div>
		<div class="action">
		</div>
	</div>
	<div class="hand" id="player">
		<div class="card">
			<span id="rank">8</<span>
			<span id="suit">&spades;</span>
		</div>
		<div class="card">
			<span id="rank">7</<span>
			<span id="suit">&spades;</span>
		</div>
	</div>
</div>

CSS

.game {
	height: 800px;
	width:  1600px;
	margin: 0 auto;
	padding-top: 4%;
}

.hand {
	clear: both;
	height: 30%;
	width: 100%;
	border: 1px solid black;
	padding-top: 2%;
	text-align: center;
}

.table {
	display: inline;
}
.deck {
	float: left;
	height: 30%;
	width: 12%;
	border: 1px solid black;
}

.action {
	height: 30%;
	width: 100%;
	border: 1px solid black;
}

.card {
	float: left;
	height: 85%;
	width: 8%;
	border: 1px solid black;
	display: inline-block;
}

span#rank, span#suit {
	font-size: 3em;
	width: 100%;
	display: block;
	text-align: center;
}