Фильтры
.filter-group {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 857px;
}
.filter-group fieldset {
display: inline-block;
}
fieldset {
border: 0 none;
margin: 0;
padding: 0;
}
.filter-name {
font-weight: 400;
font-size: 14px;
line-height: 16px;
margin-left: 16px;
}
.filter {
display: flex;
font-weight: 500;
font-size: 16px;
line-height: 18px;
top: 20%;
left: 7%;
border: none;
background-color: #f8f7f4;
}
.filter li {
list-style: none;
}
.filter-popular {
display: flex;
width: 194px;
margin-right: 0;
height: 37px;
border: none;
border-radius: 18.5px;
margin-top: 6px;
flex-wrap: wrap;
}
.cost {
width: 220px;
margin-right: 0;
height: 37px;
background-color: #f8f7f4;
border: none;
border-radius: 18.5px;
position: relative;
margin-top: 6px;
}
.filter-fat {
display: inline-block;
vertical-align: middle;
margin-right: 0;
}
.filter-filler {
width: 703px;
margin-right: 0;
}
<div class="filter-group">
<form action="#" method="GET">
<fieldset class="filter-popular">
<legend class="filter-name">Сортировка:</legend>
<select class="filter filter-popular" name="text">
<option value="popular">по популярности</option>
<option value="cheap">сначала недорогие</option>
<option value="expensive">сначала дорогие</option>
<option value="fat">по жирности</option>
</fieldset>
<fieldset class="cost">
<legend class="filter-name">Цена:</legend>
<label for="cost"></label>
50 <input type="text" id="cost" name="cost" min="100" max="1000" step="20"> 1000
<div>
<button type="button"></button>
<button type="button"></button>
</div>
</fieldset>
<fieldset class="filter-fat">
<legend class="filter-name">Жирность:</legend>
<ul class="filter">
<li>
<input type="radio" name="fat" value="0%">
<label>0%</label>
</li>
<li>
<input type="radio" name="fat" value="до 10%" checked>
<label>до 10%</label>
</li>
<li>
<input type="radio" name="fat" value="до 30%">
<label>до 30%</label>
</li>
<li>
<input type="radio" name="fat" value="выше 30%">
<label>выше 30%</label>
</li>
</ul>
</fieldset>
<fieldset class="filter-filler">
<legend class="filter-name">Наполнители:</legend>
<ul class="filter">
<li>
<input type="checkbox" name="filler" id="filler" checked>
<label for="filler">шоколадные</label>
</li>
<li>
<input type="checkbox" name="filler" id="filler" checked>
<label for="filler">сахарные присыпки</label>
</li>
<li>
<input type="checkbox" name="filler" id="filler">
<label for="filler">фрукты</label>
</li>
<li>
<input type="checkbox" name="filler" id="filler">
<label for="filler">сиропы</label>
</li>
<li>
<input type="checkbox" name="filler" id="filler">
<label for="filler">джемы</label>
</li>
</ul>
</fieldset>
</form>
</div>
<input type="submit" value="Применить">
<section>