如何拉伸输入以填充布尔玛中的容器？

Question

我正在用布尔玛构建导航，我想知道是否存在实现这种布局的正确方法：

如图所示，我有一个徽标，两个输入字段和一个按钮，最后还有另一个按钮。我需要输入字段及其按钮来拉伸和填充徽标和按钮之间的空间。 有什么办法可以让我用布尔玛实现这一目标，而又不会太混乱？ （我不确定是否应该在导航中使用列，所以我想知道还有另一种方法。）

到目前为止，这是我的代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>


<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      Logo
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <div class="field is-marginless">
        <div class="control">
          <input class="input" type="text" placeholder="Text here">
        </div>
      </div>
      <div class="field is-marginless">
        <div class="control">
          <input class="input" type="text" placeholder="Text here">
        </div>
      </div>
      <div class="field is-marginless">
        <div class="control">
          <button class="button is-primary"><i class="fas fa-search"></i></button>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            Register
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

我是布尔玛（Bulma）的新手，所以对这个问题太基础感到抱歉。但是我浏览了他们的文档，无法弄清楚。谢谢！