JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="container-route-office">
<div class="title">Маршрут до офисов компании СтройДом</div>
<div class="wr-choose-office">
Офисы города Москва:&nbsp; 
<label class="office-item"><span>Офис в Москве</span> (РОССИЯ, г. Москва, Беловежская ул, дом 4А)</label>
</div>
	<div class="wr-map-routing">
		<div id="map-routing">
		</div>
		<div class="wr-route-descr">
			<a id="show-descr-route" href="#">Показать маршрут</a>
			<div class="route-container">
				<div id="viewContainer"></div>
			</div>	
		</div>	
	</div> 
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

CSS

#map-routing{
	position:relative;
	margin:15px 0 0;
	width:570px;
	height:450px;
}
.wr-map-routing{
	position:relative;
	width:570px;
}
.wr-select-office{
	position:relative;
	display:inline-block;
    border: 1px solid #c1c1c1;
    color: #616161;
    font-size: 14px;
    height: 23px;
}

.wr-select-office label{
	position: relative;
	display:inline-block;
	color: #616161;
    font-size: 12px;
    height: 23px;
	line-height:23px;
	vertical-align:middle;
	width:480px;
	margin:0 5px;
	padding-right:24px;
	background:transparent url('/img/arrow-select_sm.png') right center no-repeat;
}

.wr-select-office span{
	font-weight:bold;
	font-size: 14px;
}

.wr-select-office ul{
	position:absolute;
	display:none;
	top:24px;
	left:-1px;
	margin:0;
	padding:0;
	list-style:none;
	border: 1px solid #c1c1c1;
	border-top:none;
	background:white;
	max-height:180px;
	overflow-y:auto;
	overflow-x:hidden;
	z-index:9999;
}

.wr-select-office ul li{
	display:inline-block;
	width:100%;
	font-size: 14px;
    height: 20px;
	line-height:20px;
}

.wr-select-office ul li a{
	display:inline-block;
	text-decoration:none;
	padding-left:5px;
	width:100%;
	color: #616161;
	font-size: 12px;
    height: 20px;
	line-height:20px;
	white-space: nowrap;
}

.wr-select-office ul li a:hover{
	background:#3399ff;
	color:#ffffff;
}

.wr-select-office ul li a span{
	font-weight:bold;
	font-size: 14px;
}


.wr-route-descr{
	position:absolute;
	top:10px;
	right:10px;
	width:250px;
}

.wr-route-descr #show-descr-route{
	padding:0 5px;
	height:28px;
	width: 240px;
	display:inline-block;
	line-height:28px;
	background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff 0px, #eee 100%) repeat scroll 0 0;
    border-radius: 2px;
	font-size:13px;
	text-decoration:none;
	color:#000;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}

.wr-route-descr #show-descr-route:hover{
	background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 1) 0px, rgba(246, 245, 243, 1) 100%) repeat scroll 0...

JavaScript

$('.office-sel').click(function(){
		$(this).next('ul').toggle();
		return false;
	});
	
	if($('.wr-select-office').length > 0){
        $(document).click(function(e){
            if($(e.target).parents('.wr-select-office').length == 0){
                $('.wr-select-office ul').hide();
            }
        });
    }
var offices_data=[{"id":"129125","supplier_id":"129618","country_id":"1","city_id":"2","name":"\u041e\u0444\u0438\u0441 \u0432 \u041c\u043e\u0441\u043a\u0432\u0435","position":"0","schelude":null,"main":"1","address":"\u0420\u041e\u0421\u0421\u0418\u042f, \u0433. \u041c\u043e\u0441\u043a\u0432\u0430, \u0411\u0435\u043b\u043e\u0432\u0435\u0436\u0441\u043a\u0430\u044f \u0443\u043b, \u0434\u043e\u043c 4\u0410","office_id":"169540","latitude":"55.711507603712","longitude":"37.390187160156","zoom":"9"}];


//создаем переменные
var myMap; //экземпляр карты
var markers = [];
var beginPlacemark, pointOffice,routeMap;
var referencePoints=[];
var multiRoute,masstransitButton;
var officeItemData, startData;
var begAddress,endAddress;

ymaps.modules.define('MultiRouteActiveDescr', [
    'util.defineClass'
], function (provide, defineClass) {
    function ActiveRouteDescr (multiRoute,multiRouteModel) {
        this.multiRoute = multiRoute;
		this.multiRouteModel= multiRouteModel;
		
        // Подписываемся на события обновления мультимаршрута
        // и смены активного маршрута.
        multiRoute.events
            .add("update", this.onMultiRouteUpdate, this)
            .add("activeroutechange", this.onActiveRouteChange, this);
		

		multiRouteModel.events
			.add(["requestsuccess"], this.onModelStateChange, this)
			.add("requestsend", this.destroyActiveRouteDescr, this)
		;
			
        // Берем текущий активный маршрут.
        this.activeRoute = multiRoute.getActiveRoute();
        //this.makeActiveRouteDescr();
		this.getAddressByCoords(beginPlacemark.geometry.getCoordinates());
    }

    defineClass(ActiveRouteDescr, {
        // Обработчик смены...