JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tocontainer">
			<fieldset>
				<ul>
					<li>
						<input type="checkbox"><h1>Alpaca Pizza<br/>$8</h1>
						<img src="images/alpacapizza.png">
					</li>
					<li>
					<input type="checkbox"><h1>Alpaca Pasta<br/>$10</h1>
						<img src="images/alpacapasta.png">
					</li>
					<li>
					<input type="checkbox"><h1>Alpaca Sub<br/>$6</h1>
						<img src="images/alpacasub.png">
					</li>
					<li>
					<input type="checkbox"><h1>Alpaca Salad<br/>$5</h1>
						<img src="images/alpacasalad.png">
					</li>
					<li>
						<input type="checkbox"><h1>Alpaca Cake<br/>$12</h1>
						<img src="images/alpacacaka.jpeg">
					</li>
					<li>
						<input type="checkbox"><h1>Alpaca Sandwich<br/>$6</h1>
						<img src="images/alpacasandwich.png">
					</li>
					<li>
						<input type="checkbox" class="drink"><h1>Alpaca Tea<br/>$4</h1>
						<img src="images/alpacatea.png">
					</li>
					<li>
						<input type="checkbox" class="drink"><h1>Alpaca Water<br/>$2</h1>
						<img src="images/alpacawater.png">
					</li>
					<li>
						<input type="checkbox" class="drink"><h1>Alpaca Soda<br/>$4</h1>
						<img src="images/alpacasoda.png">
					</li>
                            <div class="size">
                                <p>qwow</p>
                            </div>
				</ul>
			</fieldset>
		</div>

CSS

.size {
padding: 5px 10px;
background-color:#fafafa;
font-size:13px;
color:#191919
}
.drink {
	margin: 1px;
	color:#000;
	padding: 10px 10px;
	cursor: pointer;
	position: relative;
	background-color:#CCC;
	font-size: 18px;
	font-variant: small-caps;
	font-family: Tinos, serif;
}
.question:hover, 
.question .current {
	margin: 1px;
	padding: 10px 10px;
	cursor: pointer;
	position: relative;
	text-decoration:none;
	color:#fff;
	background: #404040;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#404040), to(#242424));
	background: -webkit-linear-gradient(#404040, #242424);
	background: -moz-linear-gradient(#404040, #242424);
	background: -ms-linear-gradient(#404040, #242424);
	background: -o-linear-gradient(#404040, #242424);
	background: linear-gradient(#404040, #242424);
	box-shadow:1px 1px 1px #b5b5b5;
	font-size: 18px;
	font-variant: small-caps;
	font-family: Tinos, serif;
}

JavaScript

$(document).ready(function() {
  $(".size").hide();
  //toggle the componenet with class msg_body
  $(".drink").click(function() {
      // Close all answers only if we are not closing us
      if( ! $(this).next('.size').is(':visible') )
           $('.size').slideUp(500);
      
      // Toggle us
      $(this).next(".size").slideToggle(500);
  });
});