Левый и правый в CCS не работают

---

Всем привет,

Я создаю ASP.NET веб-страница и у меня есть нижний сегмент, в который нужно добавить поле поиска (текстовое поле).

<div class="BottomBar">
                    <asp:Panel runat="server" ID="pnlSearch" GroupingText="Search" CssClass="searchBar">
                           <asp:TextBox runat="server" ID="txtSearch" TextMode="Search" />
                           <asp:Button runat="server" ID="btnSearch" Text="Zoek" CssClass="searchButton" />
                    </asp:Panel>
</div>

В моем css эта часть использует следующее кодирование:

.BottomBar {
    position: fixed;
    height: 100px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(105, 179, 231, 0.45); 
    text-align: left;
    align-self: baseline;
    align-items: baseline;
    vertical-align: bottom;
    box-shadow: -0px -3px 20px #8C8279;
   
}

В этой части я добавляю панель asp (набор полей с легендой)

.searchBar {
   display: block;
   left: 10px;
   right: 10px;
   bottom: 30px;
   position: absolute;
}

Этот блок тоже работает. Слева направо я вижу панель на экране.

Внутри панели мне нужно текстовое поле слева направо - 150px, а в последних 150 px нужна кнопка.

для поиска:

input[type=search] {
    left: 0px;
    right: 150px;
    position: relative;
    display: inline-block;
    
}

.searchButton {
    display:inline-block;
    right: 20px;
    position:fixed;
}

А теперь вопрос. Почему размер текстового поля составляет 175 пикселей, в то время как я нигде не устанавливаю это значение......

Что я уже пробовал:

Я попробовал решение Flex, найденное в нескольких местах на WWW. Я не могу заставить это работать.

---