материализация css не может поместить форму в центр navbar

Question

Когда я изучаю html и css, я пытаюсь создать панель навигации с окном поиска, вот что я получил,

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <div class="navbar-fixed">
        <nav class="teal">
            <div class="container">
                <div class="nav-wrapper">
                    <a href="#" class="brand-logo">LOGO
                    </a>

                    <ul class="right hide-on-med-and-down">
                        <li>
                            <form class="orange">
                                <div style="display: inline-flex; border: 1px black solid;">
                                    <input id="search-bar" type="search" required>
                                    <button class="btn" type="submit" style="background: blue;">
                                        <i class="material-icons" style="border: 1px red solid;">search</i>
                                    </button>
                                </div>
                            </form>
                        </li>
                        <li>
                            <a href="#home">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

фактический результат следующая картинка (сгенерированная Codeply)

Я изо всех сил пытался понять следующие проблемы,

• Почему div (внутри form, с black border) не имеет такую ​​же высоту, как form?
• Почему значок поиска (с рамкой red) торчит из нижней части панели навигации?
• Как разместить значок поиска в центре button (с blue bg)?

В общем, как исправить все вышеуказанные проблемы, чтобы иметь удачно расположенная строка поиска в marterialize navbar?

Обновление:

jsfiddle https://jsfiddle.net/avocado123321/Lrmcpdbs/1/