JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horizontal-click">				
											<input type="checkbox" name="vkl" id="vkl1" checked="checked">
					<label for="vkl1">
						<span class="trgledown trgleright"></span>
							Базовая цена					</label>
						<div>
							<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>
								<input type="text" name="arrFilter_P1_MIN" id="arrFilter_P1_MIN" value="250.00" onkeyup="smartFilter.keyup(this)">
								<input type="text" name="arrFilter_P1_MAX" id="arrFilter_P1_MAX" value="6200.00" onkeyup="smartFilter.keyup(this)">
						</div>				
				<a href="#" onclick="BX.toggle(BX('ul_1')); return false;"></a>
															
					<input type="checkbox" name="vkl" id="vkl3">
					<label for="vkl3">
						<span class="trgledown trgleright"></span>
						Производитель					</label>				
						<ul class="proizv group" id="ul_107">
														<li>
								<input type="checkbox" value=" KWA" name="arrFilter_107_2366072709" id="arrFilter_107_2366072709" onclick="smartFilter.click(this)"><b> KWA</b>
								<label for="arrFilter_107_2366072709"></label>
							</li>
														<li>
								<input type="checkbox" value="BOLLE" name="arrFilter_107_2707236321" id="arrFilter_107_2707236321" onclick="smartFilter.click(this)"><b>BOLLE</b>
								<label for="arrFilter_107_2707236321"></label>
							</li>
														<li>
								<input type="checkbox" value="Guarder" name="arrFilter_107_4194326291" id="arrFilter_107_4194326291" onclick="smartFilter.click(this)"><b>Guarder</b>
								<label for="arrFilter_107_4194326291"></label>
							</li>
													</ul>
				<a href="#" onclick="BX.toggle(BX('ul_107')); return...

CSS

.horizontal-click [name="vkl"] { 
 display: none; 
}

.horizontal-click > :not(input):not(label) {
  overflow: hidden;
  width:220px;
  height:0px;
  margin-left: 20px;
  transition: 0.1s;
  color:#6e6e6e;
  font-size:14px;
  font-family: 'Exo 2', sans-serif;
  font-weight:400;
  border-bottom:1px solid #d0d0d0;
}
.horizontal-click > label {
  overflow: hidden;
  display: block;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 5px 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  color:#000000;
  font-size:15px;
  font-family: 'Exo 2', sans-serif;
  font-weight:400;
}
.horizontal-click > :checked + label + * {
  overflow: auto;
  height: 100%;
  padding-bottom:15px;
  padding-bottom:15px;
}

.trgledown{
top: 13px;
left: -11px;
}

.horizontal-click > label .trgledown{
background:url(images/triglright.png) no-repeat;
width:7px;
height:7px;
display:block;
position:relative;
}

.horizontal-click > :checked + label .trgleright{
background:url(images/trigldown.png) no-repeat;
width:7px;
height:7px;
display:block;
position:relative;
}