Fix a SPAN position inside a DIV using CSS irrespective of screen size

Question

I have a requirement where I need to design a search box with a search icon. I've written below HTML code and CSS class to achieve this. It is working fine on a 13" screen. But when screen resolution or size changes the search box and icon breaks.

<div class="col-sm-3 pull-right">
  <div class="search-box">

    <input type="text" class="portfolio-search-input" placeholder="Search by Benefit name" />

    <span class="">
      <i class="fa fa-search"></i>
    </span>

  </div>
</div>

.portfolio-search-input {
  width: 85%;
  height: 26px;
  margin-top: 5px;
  margin-left: 100px;
  padding: 0 15px;
  outline: none;
  &:focus {
    border: 1px solid;
  }
}

.search-box {    
  position: relative;
  clear: both;
  > span {
    color: rgb(209, 15, 15);
    display: inline-block;
    margin-left: 115%;
    position: absolute;
    bottom: 3px;
  }
}

.pull-right {
  float: right;
}

How can I fix the size and position irrespective of screen size/resolution.

On a 13" screen its working fine as per the below image.

But on bigger screen it breaks, as below.

If I am using margin-left:300px;, it works fine on 13" screen. On bigger screen it gives below image.

Answer 1

Remove margin-left from .search-box > span. And add right: 0.

Remove margin-left from .portfolio-search-input. Add add that to .search-box

Here is the snippet

.portfolio-search-input {
  width: 85%;
  height: 26px;
  margin-top: 5px;
  /* margin-left: 100px; */
  padding: 0 15px;
  outline: none
}

.portfolio-search-input:focus {
  border: 1px solid;
}

.search-box {    
  position: relative;
  margin-left: 100px;
  clear: both;
}

.search-box > span {
  color: rgb(209, 15, 15);
  display: inline-block;
  /* margin-left: 115%; Remove this */
  right: 0; /* Add this */
  position: absolute;
  bottom: 3px;
}

.pull-right {
  float: right;
}

<div class="col-sm-3 pull-right">
  <div class="search-box">

    <input type="text" class="portfolio-search-input" placeholder="Search by Benefit name" />

    <span class="">
      <svg class="svg-icon" viewBox="0 0 20 20" height="16">
                            <path fill="red" d="M12.323,2.398c-0.741-0.312-1.523-0.472-2.319-0.472c-2.394,0-4.544,1.423-5.476,3.625C3.907,7.013,3.896,8.629,4.49,10.102c0.528,1.304,1.494,2.333,2.72,2.99L5.467,17.33c-0.113,0.273,0.018,0.59,0.292,0.703c0.068,0.027,0.137,0.041,0.206,0.041c0.211,0,0.412-0.127,0.498-0.334l1.74-4.23c0.583,0.186,1.18,0.309,1.795,0.309c2.394,0,4.544-1.424,5.478-3.629C16.755,7.173,15.342,3.68,12.323,2.398z M14.488,9.77c-0.769,1.807-2.529,2.975-4.49,2.975c-0.651,0-1.291-0.131-1.897-0.387c-0.002-0.004-0.002-0.004-0.002-0.004c-0.003,0-0.003,0-0.003,0s0,0,0,0c-1.195-0.508-2.121-1.452-2.607-2.656c-0.489-1.205-0.477-2.53,0.03-3.727c0.764-1.805,2.525-2.969,4.487-2.969c0.651,0,1.292,0.129,1.898,0.386C14.374,4.438,15.533,7.3,14.488,9.77z"></path>
                        </svg>
    </span>

  </div>
</div>