<div class="bg-gray-100 h-screen w-screen flex justify-center pt-10">
  <div class="container mx-auto px-4">
  	<div class="grid md:grid-cols-2 gap-8" x-data="{selected:1}">  
		
		<!-- Column 1 -->
		<div class="bg-white max-w-full mx-auto border border-gray-200">
		  <ul class="shadow-box">
			<li class="relative border-b border-gray-200">
			  <button type="button" class="w-full px-6 py-6 text-left" @click="selected !== 1 ? selected = 1 : selected = null">
			  <div class="flex items-center justify-between"> <span> Is there a refund policy? </span> 
				  <svg :class="{'transform rotate-180' : selected == 1}" class="w-5 h-5 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 9l-7 7-7-7"></path></svg>
				</div>
			  </button>
			  <div class="relative overflow-hidden transition-all max-h-0 duration-700" style="" x-ref="container1" x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
				<div class="px-6 pb-6">
				  <p>DreamSeat Enterprise Xperience Partners shall issue a full refund to any member who wishes to cancel their enrolment within 45 days prior to the start of the season. Stadium seat memberships are not refundable after the first home event of the football season. If a patron's seat is damaged or removed, DreamSeat EXP shall replace the item at no cost to the customer. Please contact the customer service hotline (864-626-9676) with any questions regarding the return policy. All sales are final. Refunds and adjustments will be considered on an individual basis.</p>
				</div>
			  </div>
			</li>
			<li class="relative border-b border-gray-200">
			  <button type="button" class="w-full px-6 py-6 text-left" @click="selected !== 2 ? selected = 2 : selected = null">
			  <div class="flex items-center justify-between"> <span> Why Can't I log in? </span> 
				  <svg :class="{'transform rotate-180' : selected == 2}" class="w-5 h-5 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 9l-7 7-7-7"></path></svg>
				  </div>
			  </button>
			  <div class="relative overflow-hidden transition-all max-h-0 duration-700" style="" x-ref="container2" x-bind:style="selected == 2 ? 'max-height: ' + $refs.container2.scrollHeight + 'px' : ''">
				<div class="px-6 pb-6">
				  <p>If you are unable to log in, please make sure you have created a new account first.  This ordering portal is different than the one where you purchase your Texas A&M game tickets.</p>
				</div>
			  </div>
			</li>
			</ul>
		</div>
			  
			  <!-- Column 2 -->
		<div class="bg-white max-w-full mx-auto border border-gray-200">
			<ul class="shadow-box">
			<li class="relative border-b border-gray-200">
			  <button type="button" class="w-full px-6 py-6 text-left" @click="selected !== 3 ? selected = 3 : selected = null">
			  <div class="flex items-center justify-between"> <span> When will I receive my seats? </span> 
				  <svg :class="{'transform rotate-180' : selected == 3}" class="w-5 h-5 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 9l-7 7-7-7"></path></svg>
				</div>
			  </button>
			  <div class="relative overflow-hidden transition-all max-h-0 duration-700" style="" x-ref="container3" x-bind:style="selected == 3 ? 'max-height: ' + $refs.container3.scrollHeight + 'px' : ''">
				<div class="px-6 pb-6">
				  <p>Game day seats are rentals will be in place for the first game of the season, unless you are in sections 409-421.  Those sections will have game day seats mid way through the football season.</p>
				</div>
			  </div>
			</li>
			<li class="relative border-b border-gray-200">
			  <button type="button" class="w-full px-6 py-6 text-left" @click="selected !== 7 ? selected = 7 : selected = null">
			  <div class="flex items-center justify-between"> <span> When will I receive my seats? </span> 
				  <svg :class="{'transform rotate-180' : selected == 7}" class="w-5 h-5 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 9l-7 7-7-7"></path></svg>
				</div>
			  </button>
			  <div class="relative overflow-hidden transition-all max-h-0 duration-700" style="" x-ref="container7" x-bind:style="selected == 7 ? 'max-height: ' + $refs.container3.scrollHeight + 'px' : ''">
				<div class="px-6 pb-6">
				  <p>Game day seats are rentals will be in place for the first game of the season, unless you are in sections 409-421.  Those sections will have game day seats mid way through the football season.</p>
				</div>
			  </div>
			</li>  
		  </ul>
		</div>
		
		
		
		
		
		
		
		
	  </div>	
  </div>
</div>
.max-h-0 {
  max-height: 0;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.js