JSFiddle - React, Tailwind, and code Playground

HTML

<div class="question">
	<form action="">
		<legend class="quest">задать вопрос вы можете, заполнив форму</legend>
		<div class="question_select" name="area">
			<div class="question_select_alone js-change">
				<input id="alone" type="text" name="person" placeholder="Выберите специалиста" value="" disabled>
			</div>
			<div class="question_select_list">		
				<div class="question_select_item_wrapp ">
					<div class="question_select_item">
						<div class="question_select_item_img">
							<img src="images/doctor1.jpg" alt="">
						</div>
						<div class="question_select_item_text">
							<span class="name-person">Михаил Юрьевич</span>
							<input type="hidden" class="spec" value="Михаил Юрьевич" name="" >
							<span class="position">Врач стоматолог детский,врач-ортодонт</span>
						</div>
					</div>
				</div>
				
				<div class="question_select_item_wrapp ">
					<div class="question_select_item">
						<div class="question_select_item_img">
							<img src="images/doctor2.jpg" alt="">
						</div>
						<div class="question_select_item_text">
							<span class="name-person">Сергей Николаевич</span>
							<input type="hidden" class="spec" value="Сергей Николаевич" name="" >
							<span class="position">Врач стоматолог детский,врач-ортодонт</span>
						</div>
					</div>
				</div>

				
				<div class="question_select_item_wrapp ">
					<div class="question_select_item">
						<div class="question_select_item_img">
							<img src="images/doctor3.jpg" alt="">
						</div>
						<div class="question_select_item_text">
							<span class="name-person">Анна Алексеевна</span>
							<input type="hidden" class="spec" value="Анна Алексеевна" name="" >
							<span class="position">Врач стоматолог детский,врач-ортодонт</span>
						</div>
					</div>
				</div>

				<div class="question_select_item_wrapp ">
					<div class="question_select_item">
						<div class="question_select_item_img">
							<img src="images/logo.png"...

CSS

.question{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #d9d9d9;
}
.question input, .question textarea{
	width: 100%;
	border: 1px solid #d9d9d9;
	box-sizing: border-box;
	padding: 0 10px;
	margin-bottom: 20px;
}
.question input[type='text']{
	height: 40px;	
}
.question_select{
	width: 450px;
	margin: 20px 0 0;
}
.question_select_alone{
	background: url(../images/select.png) no-repeat 97% 50%;
	border: 1px solid #d9d9d9;
	cursor: pointer;
	margin-bottom: 20px;
}
.question_select_alone input{
	width: 90%;
	border: 0;
	font-size: 12px;
	text-transform: uppercase;
	background: #fff;
	cursor: pointer;
	margin-bottom: 0;
}
.question_select_list{
	background: #f5f5f5;
	position: relative;
    top: -20px;
}
.question_select_item_wrapp{display: none;}
.question_select_item{
	display: table;
	padding: 10px;
	width: 100%;
	cursor: pointer;
	position: relative;
}
.question_select_item:hover{
	background: #a1b80d url(../images/check.png)no-repeat 97% 50%;
	color: #fff;
}
.question_select_item_wrapp:hover .position{color: #fff;}
.question_select_item div{
	display: table-cell;
	vertical-align: middle;
}

.question_select_item_img{
	position: relative;
	width: 66px;
	height: 53px;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid #d9d9d9;
	background: #fff;
}
.question_select_item_img img{
	position: absolute;
	max-width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.question_select_item_text{
	padding-left: 15px;
}
.question_select_item_text span{display: block;}
.position{
	font: 12.5px Arial;
	color: #666666;
}
.question_row{width: 450px;}

.question_row_textarea{width: 750px;}
.question_row_textarea textarea{
	resize: none;
	padding: 10px;
}

.question_row .button{
	display: inline-block;
	padding: 0 30px;
}

JavaScript

$(".js-change").click(function(){
		$('.question_select_item_wrapp').fadeToggle('slow');
	});
	var nameDocClick = $(".question_select_item_wrapp");
	$(function() {
    	$(nameDocClick).on('click', function () {
    		$(this).addClass('active');
    		$(this).nextAll(nameDocClick).removeClass('active');
    		$(this).prevAll(nameDocClick).removeClass('active');
    		$(nameDocClick).css('display', 'none');
			$( ".active .spec" ).change(function () {
	    		var str = "";
		    $( ".active .spec" ).each(function() {
		      str += $( this ).val() + " ";
		    });
		    $( "#alone" ).val( str );
		  })
		  .change();
		});
	});