How to make a div responsive - html

Question

How can I change the position of a div smoothly, responsive?
HTML:
<div class="icon">
<i class="fa fa-search toggle_icon"></i>
</div>
<div class="sidenav">
<center>
<input id="provider-json" />
</center>
</div>
CSS:
.icon {
position: absolute;
top: 30%;
left: 0;
width: 50px;
height: 50px;
background: #d54042;
}
.sidenav {
position: absolute;
top: 30%;
left: 52px;
height: 50px;
width: 200px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background: #d54042;
background: -webkit-linear-gradient(left, #D54042 , #D56769);
background: -o-linear-gradient(right, #D54042, #D56769);
background: -moz-linear-gradient(right, #D54042, #D56769);
background: linear-gradient(to right, #D54042 , #D56769);
}
#provider-json {
margin-top: 6px;
padding: 10px 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border:solid 1px #ccc;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
outline-color: #d54042;
}
.toggle_icon {
font-size: 2.5em;
color: white;
padding: 3px 3px 2px 5px;
}
I would like to change verticaly the position of .icon and .sidenav.
When i make the screen smaller it should go smoothly up to top: 0;
I tried this:
#media screen and (max-width: 480px) {
.icon, .sidenav {
top: 5%;
}
}
But this works only when the screen is 480px wide.

Answer 1

To give that a smooth transition, make use of css transition as below,
#media screen and (max-width: 480px) {
.icon, .sidenav {
top: 0;
transition:0.6s ease; /*Add this*/
}
}
This move icons and search bar to top at screen resolution below 480px;, check this jsFiddle

Answer 2

As per your question "change the place smoothly" I am giving you some idea about relative and absolute positioning.
According to reference "Absolute location is a place's exact spot on a map, while relative location is an estimate of where a place is in relation to other landmarks." What this means relative takes parent div into consideration but absolute is totally absolute.
<div class="container">
<div class="icon">
<i class="fa fa-search toggle_icon"></i>
</div>
<div class="sidenav">
<center>
<input id="provider-json" />
</center>
</div>
</div>
Now, refine your code by keeping container with relative positioning and other with absolute. Relative should always wrap the absolute. Also take some reference from online tutorials like w3schools with better example. You will be cleared with concept.