JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select">  
   
			<a href="#" class="slct">добавить</a>
			<ul class="drop" style="display: none;">
				<li class="rus">русский</li>
				<li class="eng">английский</li>				
			</ul>
			<input type="hidden" id="select" value="Красивый(ая)">
	</div>

CSS

/*	=	Select */
.slct {
	display: block;
	border-radius: 5px;
	border: 1px solid #cecece;
	background-color: #F6F6f6;
	width: 286px;
	padding: 4px 15px 4px 10px;
	color: #444;
	background-position: 290px -145px;
	
	/*
		Супер финт обрезаем текст
		чтобы не вылезал за рамку
	*/
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.slct.active {
	border-radius: 5px 5px 0 0;
	border-bottom: none;
}
.drop {
	margin: 0;
	padding: 0;
	width: 310px;
	border: 1px solid #cecece;
	border-top: none;
	display: none;
	position: absolute;
	background: #fff;
}
.drop li {
	list-style: none;
	border-top: 1px dotted #e8e8e8;
	cursor: pointer;
	/* width: 100px; */
	display: block;
	color: #444;
	padding: 4px 15px 4px 25px;
	background-position: 10px -119px;
}
.drop li:hover {
	background-color: #e8e8e8;
	color: #222;
}
.inner {   
  margin-top: 5px;
  margin-right: 5px;
  background-color: #ECF0F1; 
  float: left;
}
.active {
  display: block;
}

JavaScript

// Select

	$('.slct').click(function(){
		/* Заносим выпадающий список в переменную */
		var dropBlock = $(this).parent().find('.drop');
		
		/* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
		if( dropBlock.is(':hidden') ) {
			dropBlock.slideDown();
			
			/* Выделяем ссылку открывающую select */
			$(this).addClass('active');
			
			/* Работаем с событием клика по элементам выпадающего списка */
			$('.drop').find('li').click(function(){	
      	var selectResult = $(this).html();
        var getClass     = $(this).attr("class");
       if ($(".inner").hasClass("rus") && $(".inner").hasClass("eng")) { 
       		$('.slct').removeClass('active');   
       }
       else if ($(".inner").hasClass("rus") && $(this).hasClass("rus")) {
       		$('.slct').removeClass('active');         
       }
       else if ($(".inner").hasClass("eng") && $(this).hasClass("eng")) {
       		$('.slct').removeClass('active');         
       }    
			else {
        	$(this).parents(".select").prepend("<div class='inner" + " " + getClass + "'>" + "<a href='#' class='close'></a>" + selectResult + "</div>");
        } 			
		
				/* Скрываем выпадающий блок */
				dropBlock.slideUp();
        selectResult = val('');
       
			});
			
		/* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
		} else {
			$(this).removeClass('active');
			dropBlock.slideUp();
		}
		
		/* Предотвращаем обычное поведение ссылки при клике */
		return false;
	});