JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<form id="delivcalc">
  <div class="calcbody">
		
	<div class="helpaddr">Укажите координаты начала и конца пути и нажмите найти!</div>
	<br>
	<hr>
	<p class="calczag">Длина машины</p>
	<form class="container">
		<div class="row pad-btm-40">
		<!-- START tabs -->
		<div class="span16">
		<div class="spaceEmOut">
		<fieldset class="switch switch-three">
			<input id="auto3" name="view4" type="radio" checked="">
			<label for="auto3">3<br>метра</label>
			<input id="auto4" name="view4" type="radio">
			<label for="auto4">4<br>метра</label>
			<input id="auto5" name="view4" type="radio">
			<label for="auto5">5<br>метров</label>
		</fieldset> 
		</div>
		</div> 
		</div> 
	</form>
	<br>
	<hr>
	<p class="calczag">Грузчики</p>
	<form class="container">
		<div class="row pad-btm-40">
		<!-- START tabs -->
		<div class="span16">
		<div class="spaceEmOut">
		<fieldset class="switch switch-three">
			<input id="gr0" name="view4" type="radio" checked="">
			<label for="gr0">НЕТ</label>
			<input id="gr1" name="view4" type="radio">
			<label for="gr1"><i class="fa fa-male"></i></label>
			<input id="gr2" name="view4" type="radio">
			<label for="gr2"><i class="fa fa-male"></i> <i class="fa fa-male"></i></label>
			<input id="gr3" name="view4" type="radio">
			<label for="gr3"><i class="fa fa-male"></i> <i class="fa fa-male"></i> <i class="fa fa-male"></i></label>
		</fieldset> 
		</div>
		</div> 
		</div> 
	</form>

	<hr>
	<input class="calcbtn" type="button" value="РАСЧИТАТЬ" id="calc">
	<br>
	<p><br>*Расчет стоимости приблизительный. Итоговая стоимость перевозки может быть увеличена или уменьшена. Для более точного расчета необходимо обратиться по телефону <strong>+7 (904) 970-29-84</strong></p>
  </div>
<div...

CSS

.calcbody{width:300px;float:left;} 
.calcbtn{float: right;width: 100%;color: white;background-color: gray;font-family: sans-serif;font-weight: bold !important;font-size: 20px;} 
.calczag{color: grey;font-weight: bold;font-size: 18px;margin: 0px;}
.helpaddr{background: gray;position: relative;width: 80%;height: 50px;padding-left:10px;padding-top:10px;color:white; font-weight:bold;}
.helpaddr::after {content: '';position: absolute;bottom: 0px;right: -25px;border: 15px solid transparent;border-left: 10px solid gray;border-bottom: 20px solid gray;}
.rotate{padding:10px;}
.rotate div{
    width: 20%;
    padding: 5px;
    border: 1px solid;
    text-align: center;
    }
.gruz{}
.gruz div{width:50px;}
.gruz input {
 display: none;
}

/* радио */
@media only screen {

 .toggle {
 color: #fff;
 display: block;
 font-family: sans-serif;
 font-size: 12px;
 font-weight: bold;
 margin: 0;
 padding: 0;
 position: relative;
 width: 200px;
 }

 .toggle label {
 display: block;
 padding: 3px 0;
 position: relative;
 width: 100%;
 z-index: 3;
 }

 .toggle input {
 opacity: 0;
 position: absolute;
 z-index: 5;
 }

 .toggle input:focus ~ .toggle-button {
 outline: 1px dotted #6B6B6B;
 }

 .switch {
 border: 0;
 color: #fff;
 font-family: sans-serif;
 font-size: 12px;
 font-weight: bold;
 padding: 0;
 position: relative;
 width: 270px;
 }

 .switch input {
 opacity: 0;
 position: absolute;
 }

 .switch label {
 color: gray;
 cursor: pointer;
 float: left;
 margin-top: 2px;
 padding: 5px !important;
 position: relative;
 text-align: center;
 width: 25%;
 z-index: 2;
 }

 .switch input:checked + label {
 color: orange;
 font-family: monospace;
 font-size: 18px;
 padding: 5px !important;
 font-weight: bold !important;
 moz-transition: all 0.4s ease-in 0s;
 o-transition: all 0.4s ease-in 0s;
 transition: all 0.4s ease-in 0s;
 webkit-transition: all 0.4s ease-in 0s;
 }

 .switch input:focus + label {
 background-color: #EDEDED;
 moz-transition: all 0.4s ease-in 0s;
 o-transition: all...

JavaScript

$('#calc').on('click',function(){
	$('#result').toggleClass('active');
});
function init() {
    var myMap = new ymaps.Map('map', {
            center: [60.906882, 30.067233],
            zoom: 9,
            type: 'yandex#map',
            controls: []
        }),
        searchStartPoint = new ymaps.control.SearchControl({
            options: {
                useMapBounds: true,
                noPlacemark: true,
                noPopup: true,
                placeholderContent: 'Адрес начальной точки',
                size: 'large'
            }
        }),
        searchFinishPoint = new ymaps.control.SearchControl({
            options: {
                useMapBounds: true,
                noCentering: true,
                noPopup: true,
                noPlacemark: true,
                placeholderContent: 'Адрес конечной точки',
                size: 'large',
                float: 'none',
                position: { left: 10, top: 44 }
            }
        }),
        calculator = new DeliveryCalculator(myMap, myMap.getCenter());

    myMap.controls.add(searchStartPoint);
    myMap.controls.add(searchFinishPoint);

    searchStartPoint.events.add('resultselect', function (e) {
        var results = searchStartPoint.getResultsArray(),
            selected = e.get('index'),
            point = results[selected].geometry.getCoordinates();

        calculator.setStartPoint(point);
    })
        .add('load', function (event) {
            // По полю skip определяем, что это не дозагрузка данных.
            // По getRusultsCount определяем, что есть хотя бы 1 результат.
            if (!event.get('skip') && searchStartPoint.getResultsCount()) {
                searchStartPoint.showResult(0);
            }
        });

    searchFinishPoint.events.add('resultselect', function (e) {
        var results = searchFinishPoint.getResultsArray(),
            selected = e.get('index'),
            point = results[selected].geometry.getCoordinates();

       ...