Button alignment when text box shrinks (CSS)

Question

Alright, what I am trying to do is, I want the button beside my text box to be aligned beside the text box whenever my page resize, which would cause my text box to shrink or expand accordingly ( as you can see below in the following snippet) Can someone help me out here? Thanks in advance for the help!

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 

 .topnav { background-color: transparent; } .topnav a { display: inline-block; color: black; padding: 14px 16px; text-decoration: none; font-size: 16px; } .topnav .icon { display: none; } .dropdown { float: right; padding-top: 5px; } .hehe { float: right; padding-top: 5px; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: transparent; color: skyblue; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 900px) { .topnav a:not(:nth-child(-n+2)), .dropdown .dropbtn { display: none; } .topnav a:not(:nth-child(-n+2)), .hehe { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 900px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .hehe { float: none; } .topnav.responsive .dropdown-content { position: relative; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } .topnav.responsive .hehe { display: block; width: 100%; text-align: left; } } .searchFeature { border: 1px solid #999; padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */ border-radius: 3px; /* transition: background 0.4s; */ width:40%; position: absolute; top: 18px; left: 75px; } .test { position: absolute; top: 20px; left: 350px; } 

 <div class="topnav" id="myTopnav" ng-controller="searchController"> <a href="#!/index" class="searchba"><img ng-src="" />LOGO</a> <input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button> <div class="hehe"> <a href="">Developer</a> <a href="">Data Enquiry</a> </div> <div class="dropdown"> <button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button> <div class="dropdown-content" > <a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a> </div> </div> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> 

Answer 1

Remove absolute positioning from both .test and .searchFeature , then wrap them in a flexbox. I also recommend adding a min-width to the input.

HTML:

<div class="search-wrapper">
  <input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
  <button class="test">Test</button>
</div>

CSS:

.search-wrapper {
  display: flex;
  flex-direction: row;
}

.test {}

.searchFeature {
  border: 1px solid #999;
  padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  /* transition: background 0.4s; */
  width:40%;
}