Неправильный flex для элементов поиска
Есть сайт
а требуется
Код моего примера
.crossline, .bottompart {
flex: 1;
/*width: 100%;*/
/*height: 33%;*/
}
.crosslineright {
width: 100%;
/*margin-top: 40px;*/
/*margin-left: 20px;*/
/*margin-right: 20px;*/
/*align: right;*/
text-align: right;
}
.close {
margin-top: -14px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
font-size: 24px;
cursor: pointer;
display: inline-block;
}
.dropdownwindowright {
width: 75%;
}
.CatalogMenuSearch #SearchBlock {
/*border-bottom: 1px solid orange;*/
}
#SearchBlock {
padding-top: 5px;
/*padding-left: 25px;*/
margin-left: 25px;
margin-right: 50px;
/*padding-right: 50px;*/
display: flex;
justify-content: flex-end;
height: 35px;
border-bottom: 1px solid black;
}
#SearchInputdiv {
height: 100%;
width: calc(100%-35px);
flex: 1;
}
#SearchButtondiv {
height: 100%;
/*justify-content: flex-end;*/
flex: 35px;
}
#SearchButton button svg{
vertical-align: middle;
/*justify-content: flex-end;
flex: 35px;*/
}
<div id="dropdownwindowright">
<div class="crosslineright">
<div class="close">×</div>
</div>
<div class="CatalogMenuSearch">
<div id="SearchBlock">
<div id="SearchInputdiv">
<input type="search" placeholder="Поиск по товарам" id="SearchInput">
</div>
<div id="SearchButtondiv">
<button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
</div>
</div>
</div>
<div class="CatalogMenuRight">
</div>
</div>

