CSS Positioning

1

Here is what I would like to input box to look like all the time regardless of screen size.

Screen Shot 2020-09-19 at 10.50.29 PM
Screen Shot 2020-09-19 at 10.50.29 PM810×526 34.7 KB

Screen Shot 2020-09-19 at 10.46.47 PM
Screen Shot 2020-09-19 at 10.46.47 PM1076×740 47.7 KB

How can I make the search button stay inside the input. Here is my code for the react component

.input {
  width: 400px;
  padding: 14px 30px;
  border-radius: 50px;
  outline: none;
  font-size: 18px;
}
.searchBox {
  text-align: center;
  width: 100%; 
  position: relative;
}
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: Roboto;
  text-transform: uppercase;
}

.close-btn {
  top: 2px;
  left: 57.5%;
  position: absolute;
  cursor: pointer;
  color: #ffffff;
  background: #000000;
  border: 0px;
  width: 120px;
  height: 55px;
  border-radius: 50px;
  outline: none;
  text-transform: uppercase;
  font-weight: bold;
}


import React from "react";
import "./style.css";

function Search() {
  return (
    <div class="searchBox mt-5">
      <input type="text" class="input" placeholder="Search Error Code" />
      <input type="button" value="search" class="close-btn" />
    </div>
  );
}

export default Search;
2

In .close-btn replace left with right and set dynamic height:

3

I see your works but I am having some trouble implementing it on my end. It adjusts on smaller screens.

Here is the repo incase you want to take a look.

It seems like display flex plays a really big role in this. I think the bootstrap media queries might be causing an issue

4

In the Home.css file add the following lines:

.close-btn {

  position: absolute;

  right: 285px;

}

@media only screen and (max-width: 990px) {

  .close-btn {

    right: 163px;

  }

}

@media only screen and (max-width: 767px) {

  .close-btn {

    right: 72px;

  }

}