flipdom copy.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		.box {
			width: 150px;
			height: 150px;
			border: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
		}

		.pie {
			display: block;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			margin: 4px;
			background-color: #333;
			box-shadow: inset 0 3px #111, inset 0 -3px #555;
		}

		.box .pie:nth-child(2) {
			align-self: flex-end;
		}
	</style>
</head>

<body>
	<div>
		<div class="box">
			<div class="pie">
			</div>
			<div class="pie">
			</div>
		</div>
	</div>
</body>

</html>