JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<div class="row">
		<label><strong>Meeting Keynotes:</strong>
			<div class="columns">
				<label>Tap to select:
					<div class="columns no-pad" id="slick-select">
						<div class="button warning">Tax</div>
						<div class="button warning">Hedge Funds</div>
						<div class="button warning">Financial Analysis</div>
						<div class="button warning">CPA Exam</div>
						<div class="button warning">Wealth Management</div>
						<div class="button warning">Auditing</div>
						<div class="button warning">Microsoft Products</div>
						<div class="button warning">Quick Books</div>
						<div class="button warning">Legal</div>
					</div>
				</label>
			</div>
			<div class="columns no-pad">
				<label>Selected:
					<div class="columns no-pad c-sort" id="slick-drop">
					
					</div>
				</label>
			</div>
		</label>
	</div>

CSS

#slick-select .button{
	margin-bottom: 0;
}
#slick-drop{
	min-height: 45px;
	margin-bottom: 1.25rem;
}
#slick-drop .button{
	margin: 0px 6px 6px 0px !important;
}

JavaScript

$(function(){
	$(document).foundation();
  
  $('#slick-select > div.button').addClass('sort-item');
  
  $('#slick-select').on('init',function(){
        $(document).on('click','.sort-item',function(e){
          e.preventDefault();

          if($(this).parent().hasClass('slick-track')){

            console.log('move from slick');
            //were moving from slider
            var i = $(this).index();
            console.log(i);
            var t = $(this).clone().attr('style','display: inline-block !important');
            if(i>0) i--;
            $('#slick-select').slick('slickRemove',i,true);
            $('#slick-drop').append(t);
            $('html, body').animate({
              scrollTop: $('#slick-drop').offset().top + $('#slick-drop').height() + 15,
            },300);

          }else{

            console.log('move to slick');
            //moving back to slider
            var t = $(this).clone().removeClass('slick-slide').removeClass('slick-cloned').attr('style','');
            $(this).remove();
            var i = $('#slick-select').slick('slickCurrentSlide');
            if(i>0) i++;
            $('#slick-select')
            .slick('slickAdd',t,i)
            .slick('slickGoTo',i,true);

          }
          return false;
        });
  })
  .slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    draggable: false
  });
});