<main>
	<img src="bottle.png" alt="">
	<div>
		<input type="radio" name=blue checked> <br>
		<input type="radio" name=blue> <br>
		<input type="radio" name=blue> <br>
		<input type="radio" name=blue>
	</div>
</main>
img{
	height: 500px;
	width: auto;
	shape-outside: url("bottle.png");
	float: left;
	filter: brightness(1.5);
}

input{
	width: 25px;
	height: 25px;
	box-sizing: content-box;
	background:  linear-gradient(45deg, pink, beige);
	border: 10px solid #231714;
	margin-left: 20px;
	appearance: none;
	-webkit-appearance:  none;
	border-radius: 50%;
	cursor: pointer;
}

input:not(:first-child){ margin-top: 5px; }

input:checked{ background: #d02017; }

input:checked::after{ font-weight: bold; }

input::after{
	display: inline-block;
	text-indent: 50px;
	font-size: 24px;
	font-family: 'Satisfy', cursive;
	width: max-content;
	background: linear-gradient(to right, #231714 40%, #d02017);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

input:nth-of-type(1)::after{ content:  'One bottle'; }
input:nth-of-type(2)::after{ content:  'Set of six'; }
input:nth-of-type(3)::after{ content:  'Twelve'; }
input:nth-of-type(4)::after{ content:  'A whole crate'; }

input:hover::after{
	text-decoration-line: underline;
	text-decoration-color: #d02017;
	text-decoration-style: solid;
}

body{
	user-select: none;
	-webkit-user-select:  none;
	-moz-user-select:  none;
	background-color: ghostwhite;
}

div{ padding-top: 80px; }

main{
	margin: auto;
	margin-top: calc(50vh - 250px);
	width: 380px;	
}

@media (max-width: 440px){
	main{
		transform: scale(.6);
	}
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Satisfy&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.