JSFiddle - React, Tailwind, and code Playground

HTML

<div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;">
<form method="get" action="">
	<div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;">
		<div><img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
		<div><img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
	</div>
	<h3>Options</h3>
	<h4 style= "">Images for size 119</h4>
</form>
</div>

CSS

div.solitaireprefs {
	background-color: #fff;
	border-radius: 7px; 
	border: 1px solid #ddd;
}

div.solitaireprefs form {
	padding: 0 15px;
}

div.solitaireprefs h3 {
	background: #e9e9e9;
	margin: 0 -15px;
	padding: .7em 0;
	text-align: center;
	border-radius: 7px 7px 0 0 ; 
}

JavaScript

cecec