将块内的内容拉伸到全宽

Question

有一个网站标题

其中，在 10,000 个产品中搜索和查找按钮应位于块的整个宽度（而不是如图所示 - 向左按下）。我给代码

#pageHeader .headerinsidessecondrow {
  padding-left: 74px;
  padding-right: 74px;
  width: 100%;
  height: 57px;
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  font: 16px "PT Sans", sans-serif;
}

.catalog {
  margin-left: auto;
  margin-right: auto;
  flex: 20%;
}

.catalog .catalogbutton {
  margin-left: auto;
  margin-right: auto;
}

.betweenspace {
  flex: 15%;
}

.inputsearch {
  margin-left: auto;
  flex: 30%;
  /*border-bottom-width: 0px;*/
  /*height: 32px;*/
}

.searchbutton {
  margin-left: auto;
  flex: 10%;
  height: 30px;
}

.findinfo {
  flex: 40%;
}

.secondbetweenspace {
  flex: 5%;
}

.loginandsignup {
  margin-left: auto;
  margin-right: 0px;
  display: flex;
  align-items: center;
  flex: 10%;
  display: flex;
  justify-content: flex-end;
  align-self: center;
}

.basket {
  /*margin-left: auto;*/
  margin-right: 0px;
  display: flex;
  align-items: center;
  flex: 10%;
  display: flex;
  justify-content: flex-end;
  align-self: center;
}

<div class="headerinsidessecondrow">
  <span class="catalog">
    <button class="catalogbutton">Каталог товаров</button>
</span>

  <span class="betweenspace">
</span>

  <span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch" />
            <span class="searchbutton">
                <button>Найти</button>
            </span>
  </span>

  <span class="secondbetweenspace">
</span>

  <span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
  <span class="loginsignuptext">
        Вход и регистрация
    </span>
  </span>

  <span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
  <span class="loginsignuptext">
        Корзина
    </span>
  </span>
</div>

告诉我如何将上述元素拉伸到包含它的块的整个宽度。