html - Please explain the following behavior -

i have given position parent relative , child absolute, child element(icon) not fitted in given parent, going out of parent. can 1 please explain behavior?

that icon should in right of text , top.

if below breakpoint {@media (min-width:320px) , (max-width:640px)} text should in left , icon should next text. if text goes in 2 line icon should again in top right. please me.

<div id="main">         <div class="left">             <div class="leftwrapper"> <span>*</span>      <span>hello label may 2 line</span>                  <div class="lefticon"><img src="https://wiki.jenkins-ci.org/download/attachments/42469250/info.gif?version=1&modificationdate=1264477127000"/></div>             </div>         </div>         <div class="right">             <input type="text" />         </div>     </div> 

css

* {   box-sizing: border-box; }  #main {   background: red;   display: inline-block;   width: 100%;   height: auto;   overflow: hidden;   padding: 10px; } #main .left {   width: 50%;   float: left; } #main .left .leftwrapper {   width: 100%;   padding: 10px;   background-color: tomato;   position: relative;   text-align: right; } #main .left .leftwrapper span:first-child {   text-align: right;   color: #fff; } #main .left .leftwrapper .lefticon {   position: absolute;   left: 100%; } #main .right {   width: 50%;   display: inline-block;   background-color: #fff;   padding: 10px; } #main .right input[type="text"] {   width: 90%; }  @media (min-width: 320px) , (max-width: 640px) {   #main .left {     width: 100%;   }   #main .left .leftwrapper {     text-align: left;   }   #main .right {     width: 100%;   } } 

here jsfiddle

you should use:

top: 0; right: 0; 

instead of left: 100%. using left 100% means begin 100% after div.