# CSS Positioning

**URL:** <https://forum.freecodecamp.org/t/css-positioning/421760>\
**Category:** General\
**Created:** [September 20, 2020, 5:48am UTC](https://forum.freecodecamp.org/t/css-positioning/421760 "2020-09-20T05:48:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![zootechdrum](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/zootechdrum/32/70232_2.png) [@zootechdrum](https://forum.freecodecamp.org/u/zootechdrum)\
**Post date:** [September 20, 2020, 5:48am UTC](https://forum.freecodecamp.org/t/css-positioning/421760/1 "2020-09-20T05:48:55Z")

</div>

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](https://global.discourse-cdn.com/freecodecamp/original/3X/f/c/fc8bcf72dd559f36237a84caa8a51d757922bc26.png)

 ![Screen Shot 2020-09-19 at 10.46.47 PM](https://global.discourse-cdn.com/freecodecamp/original/3X/5/2/5229e912bb5336bd50600601e1d4e62566bec5e7.png)

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

```auto
.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;
}

```

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [September 20, 2020, 6:46am UTC](https://forum.freecodecamp.org/t/css-positioning/421760/2 "2020-09-20T06:46:21Z")

</div>

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

> **[jOqeJzP](https://codepen.io/jenovs/pen/jOqeJzP)**
>
> ...

---

<div class="post-metadata">

**Author:** ![zootechdrum](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/zootechdrum/32/70232_2.png) [@zootechdrum](https://forum.freecodecamp.org/u/zootechdrum)\
**Post date:** [September 20, 2020, 7:40am UTC](https://forum.freecodecamp.org/t/css-positioning/421760/3 "2020-09-20T07:40:20Z")

</div>

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.

> **[zootechdrum/fender-defects](https://github.com/zootechdrum/fender-defects)**
>
> Contribute to zootechdrum/fender-defects development by creating an account on GitHub.

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

---

<div class="post-metadata">

**Author:** ![rcmalonso](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rcmalonso/32/179662_2.png) [@rcmalonso](https://forum.freecodecamp.org/u/rcmalonso)\
**Post date:** [September 20, 2020, 4:54pm UTC](https://forum.freecodecamp.org/t/css-positioning/421760/4 "2020-09-20T16:54:33Z")

</div>

In the Home.css file add the following lines:

```auto
.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;

  }

}

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:38pm UTC](https://forum.freecodecamp.org/t/css-positioning/421760/5 "2021-06-01T18:38:54Z")

</div>