Почему эти элементы не выровнены?

Я создаю форму поиска и кнопку формы с jquery следующим образом:

var search_list_item = $("<li />");

var search_form = $("<form />", {
    name: "search_form",
    class: "search_form"
});

var search_input = $("<input />", {
    type: "text",
    name: "search_input",
    class: "search_bar"
});

var search_button = $('<input'
    + ' type="submit"'
    + ' value="&#128269;"'
    + ' class="search_button"'
    + ' name="search_button"'
  +' />');

search_form.append(search_input);
search_form.append(search_button);
search_list_item.append(search_form);

CSS устанавливается с помощью этого

.search_bar{
    background-color:white;
    box-shadow: rgb(204, 204, 204) 0px 0px 0px 1px inset;
    border: 1px solid rgb(178, 210, 203);
    border-radius: 8px;
    height: 20px;
    width: 150px;
    font-size: 12px;
}

.search_button {
    cursor: pointer;
    border: 0px;
    background-color: #d4d4d4;
    font-family: 'EntypoRegular';
    color: #5f615c;
    font-size: 30px;
    line-height: 1px;
    padding: 0px;        
    height: 20px;
    width: 20px;
    left: 15.4%;
}

HTML выглядит так:

<li>
    <form name="search_form" class="search_form">
        <input type="text" name="search_input" class="search_bar"/>
        <input type="submit" value="" class="search_button" name="search_button"/>
    </form>
</li>

Но конечный результат выглядит следующим образом:

Почему панель поиска и кнопка не выстроились в линию?