<div class="subheader-search-container">
  <form
    action="{% route search %}"
    method="get"
    data-test="desktop-search">
    <i class="subheader-search-icon far fa-search"></i>
    <input
      aria-label="Search"
      class="subheader-search-input lang-en"
      type="text"
      name="q"
      placeholder="Search" />
    <input
      aria-label="Buscar"
      class="subheader-search-input lang-es"
      type="text"
      name="q"
      placeholder="Buscar" />
  </form>
</div>
<style>
  .subheader-search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #013d29;
    padding: 10px 16px;
    position: relative;
  }

  .subheader-search-container > form {
    width: 100%;
  }
  .subheader-search-icon {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    top: 20px;
    left: 36px;
    color: #AAA;
  }

  .subheader-search-input {
    width: 100%;
    padding: 10px 10px 10px 58px;
    border-radius: 8px;
  }
</style>