title: CSS Input field not responsive
body: <p>I am at wits end and could really use some help.  I am trying to create an input field, in this case "PASSWORD" that is flexible in that when the screen resizes, so does the field and data, but it doesn't work.  I see 2 problems:</p>
  
  <p>1:  It only allows something like 17 characters and then trails into nothing.  What I want is after you lose focus on the field, the field populates with the "..." ( text-overflow: ellipsis ) if it is bigger than field itself.</p>
  
  <ol start="2">
  <li>Allow more than just the 17 characters at input time.  If I use a percentage, like 80%, when the screen resizes, it drops the field down a row, making it neither pretty nor responsive.</li>
  </ol>
  
  <p><a href="http://jsfiddle.net/lepew/y3jkyx1c/6/" rel="nofollow">http://jsfiddle.net/lepew/y3jkyx1c/6/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body
  {
    background: #181818;
  }
  
  
  /* ******************************************************************** */
  /*                                                                      */
  /*  This is the sunken field.  It will be generic for all forms.        */
  /*                                                                      */
  /* ******************************************************************** */
  #form_Sunk
  {
     margin: 0 auto;
     width: 90%;
     height: 30px;
     line-height: 30px;
     border-radius: 4px;
     display: inline-block;
     text-transform: uppercase;
     background: repeat-x center center #000;
     box-shadow: rgba(255,255,255, 0.15) 1px 1px;
     -webkit-box-shadow: rgba(255,255,255,0.15) 1px 1px;
  }
  
  /* ******************************************************************** */
  /*                                                                      */
  /*  This is the gray button WITHIN the sunken field.                    */
  /*                                                                      */
  /* ******************************************************************** */
  #sunk_Knob
  {
     float: left;
     color: #fff;
     height: 26px;
     background: #777;
     text-align: left;
     line-height: 26px;
     font-weight: bold;
     position: relative;
     margin: 2px 0 0 2px;
     padding: 0 6px 0 6px;
     border-radius: 3px 0 0 3px;
  }
  
  /* ******************************************************************** */
  /*                                                                      */
  /*  This is the data area WITHIN the sunken field.                      */
  /*                                                                      */
  /* ******************************************************************** */
  #sunk_Data
  {
     color: cyan;
     padding-left: 5px;
     padding-right: 25px;
     font-weight: bold;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
  }
  
  /* ******************************************************************** */
  /*                                                                      */
  /*  This is the Tool Tip WITHIN the sunken field.                       */
  /*  LEFT is used when it is INSIDE the sunken area.                     */
  /*  RIGHT is used when it is OUTSIDE the sunken area.                   */
  /*                                                                      */
  /* ******************************************************************** */
  #sunk_Tool
  {
     top: -22px;
     xleft: -7px;
     right: -20px;
     width: 14px;
     height: 14px;
     float: right;
     position: relative;
     background: url("question-mark-000.png") no-repeat scroll 0px 0px transparent;
  }
  
  
  /*  GOOD from HERE ^^^^^ up.  */
  
  
  #peter04
  {
     border: 0 none;
     color: yellow;
     padding-left: 5px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     padding-right: 25px;
     background-color: transparent;
     -webkit-appearance: none;
  }
  
  #sunk_Tips
  {
     top: 8px;
     right: -20px;
     width: 14px;
     height: 14px;
     float: right;
     position: relative;
     background: url("question-mark-000.png") no-repeat scroll 0px 0px transparent;
  }
  
  ::-ms-clear
  {
     display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;form action="" method="post"&gt;
     &lt;div id="form_Sunk"&gt;
        &lt;div id="sunk_Knob"&gt;
           User ID:
        &lt;/div&gt;
        &lt;div id="sunk_Data" title="THIS IS TEST CODE FOR NADA."&gt;
           THIS IS TEST CODE FOR NADA.
        &lt;/div&gt;
        &lt;div id="sunk_Tool" title="USER ID"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;br /&gt;
     &lt;br /&gt;
  
     &lt;div id="form_Sunk"&gt;
        &lt;div id="sunk_Knob"&gt;
           Password:
        &lt;/div&gt;
        &lt;input type="text" name="pword" id="peter04" placeholder="Password"&gt;
        &lt;div id="sunk_Tips" title="PASSWORD"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;br /&gt;
     &lt;br /&gt;
     &lt;div id="form_Sunk"&gt;
        &lt;div id="sunk_Knob"&gt;
           Code:
        &lt;/div&gt;
        &lt;div id="sunk_Data" title="THIS IS TEST CODE FOR NADA."&gt;
           THIS IS TEST CODE FOR NADA.
        &lt;/div&gt;
        &lt;div id="sunk_Tool" title="CODE"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;br /&gt;
     &lt;br /&gt;
  &lt;/form&gt;  
      
  &lt;/body</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would greatly be appreciated.</p>