JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item-details">
	    				<div class="item-header">
	    					<h4 class="title"><span>Select Your Base</span></h4>
	    				</div><!--end item-header div-->
	    				
	    				<ul class="list-name-goes-here">
			       			<li class="count-1">
			       				<a class="button button-1" href="#">
			       					<span class="text">Topping Option</span>
			       					<span class="price">£ 22.99</span>
			       				</a>
			       			</li>
			       			<li class="count-2">
			       				<a class="button button-2" href="#">
			       					<span class="text">Topping Option blah blah blah</span>
			       					<span class="price">£ 22.99</span>
			       				</a>
			       			</li>
			       			<li class="count-3">
			       				<a class="button button-3" href="#">
			       					<span class="text">Topping Option</span>
			       					<span class="price">£ 22.99</span>
			       				</a>
			       			</li>
			       			<li class="count-4">
			       				<a class="button button-4" href="#">
			       					<span class="text">Topping Option</span>
			       					<span class="price">£ 22.99</span>
			       				</a>
			       			</li>
			       			<li class="count-5">
			       				<a class="button button-5" href="#">
			       					<span class="text">Topping Option</span>
			       					<span class="price">£ 22.99</span>
			       				</a>
			       			</li>
			       			<li class="count-6">
			       				<a class="button button-6" href="#">
			       					<span class="text">Topping Option</span>
			       					<span class="price">£ 22.99</span>
			       				</a>
			       			</li>
			       			<li class="count-7">
			       				<a class="button button-7" href="#">
			       					<span class="text">Topping Option</span>
			       					<span class="price">£ 22.99</span>
			       				</a>
			       			</li>
			       			<li class="count-8">
			       				<a class="button button-8" href="#">
			       					<span class="text">Topping Option</span>
			      ...

CSS

.item-details							{ float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 .item-details .item-header				{ position: relative; float: left; width: 100%; margin: 0 0 10px 0; padding: 0 80px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 .item-details .item-header .title		{ margin: 0; }
 .item-details .item-header .price		{ position: absolute; top: 0; right: -10px; width: 80px; height: 100%; text-align: center; }
 .item-details .description				{ float: left; width: 100%; margin: 0 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

 .item-details ul 						{ float: left; width: 100%; margin: 0 0 10px 0; padding: 10px 9px 9px 10px!important; background-color: #393c3e!important; background-image: url(images/highlight-bg.png); background-repeat: repeat; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.item-details ul li  					{ float: left; width: 33.333333%; height: auto; min-height: 100%; margin: 0; padding: 0 1px 1px 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.item-details ul li .button				{ float: left; width: 100%; height: auto; min-height: 100%; margin: 0; padding: 10px; border-bottom: 1px solid #fff; min-height: 40px; margin: 0; padding: 10px 0 10px 0; font-size: 14px; line-height: 20px; text-align: center; color: #e4e5e6; background-color: #393c3e; background-position: center; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	 .item-details ul li .button:hover,
	.item-details ul li .button.active		{}
	 .item-details ul li .button .text		{ float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	 .item-details ul li .button .price		{ float: left; width: 100%;...