Make button left of input-CodePudding

I want to make button with id #searchBtn left to input form with id #searchInput. HTML:

header {
  position: relative;
  z-index: 2;
}

.searchInputMain {
  width: 300px;
  height: 40px;
}

.searchButton {
  width: 200px;
  height: 40px;
  margin-top: 5px;
}

#searchForm {
  position: static;
  float: right;
  margin-top: 20px;
  margin-right: 500px;
}

#searchBtn {
  position: static;
  float: right;
  margin-right: 150px;
}

<header>
  <div id="searchForm">
    <form>
      <input >
      <button  id="searchBtn" type="submit">
                        Search
                    </button>
    </form>
  </div>
</header>

How to make it? Which styles need to it? Which styles is useless?

CodePudding user response：

Just switch position in html.
removed unnecessary css.

header {
  position: relative;
  z-index: 2;
}

.searchInputMain {
  width: 300px;
  height: 40px;
}

.searchButton {
  width: 200px;
  height: 45px;
}

#searchForm {
  margin-top: 20px;
}

#searchForm form {
  display: flex;
}

<header>
  <div id="searchForm">
    <form>
      <button  id="searchBtn" type="submit">
                        Search
                    </button>
      <input >
    </form>
  </div>
</header>

CodePudding user response：

header {
      position: relative;
      z-index: 2;
    }

    .searchInputMain {
      width: 300px;
      height: 40px;
      box-sizing: border-box;
    }

    .searchButton {
      width: 200px;
      height: 40px;
    }

    form{
      display: inline-flex;
      flex-direction: row-reverse;
    }

<header>
  <div id="searchForm">
    <form>
      <input >
      <button  id="searchBtn" type="submit">
                        Search
                    </button>
    </form>
  </div>
</header>

a better way would be to simply change the HTML to position the button before the form element. but if you can not do that, replace your CSS with the following one

    header {
      position: relative;
      z-index: 2;
    }

    .searchInputMain {
      width: 300px;
      height: 40px;
      box-sizing: border-box;
    }

    .searchButton {
      width: 200px;
      height: 40px;
    }

    form{
      display: inline-flex;
      flex-direction: row-reverse;
    }