Satır girişi, birbirinin üzerine textarea seçin

Question

Alanları çizmeyi başaramıyorum. Eqaul genişliğinde olmadıklarını gördüğünüz gibi bunu nasıl düzeltebilirim? Bir kerelik bir çözüm aramıyorum Bunu nasıl güzel bir şekilde çözmeyi öğrenmek istiyorum.

#login-panel { 
 
    width: 400px; 
 
} 
 
.field { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
#login-panel > .field > input, #login-panel > .field > select { 
 
    border: 1px solid #ccc; 
 
    padding: 1em; 
 
    margin-bottom: 2px; 
 
    width: 100%; 
 
} 
 
#login-panel > .textarea > textarea { 
 
    width: 100%; 
 
    resize: none; 
 
}

 <form class="login-panel"> 
 
      <div id="login-panel"> 
 
       <div class="login-header">Login</div> 
 
       <div class="field"> 
 
        <input type="text" id="login-nickname" placeholder="Username"> 
 
       </div> 
 
       <div class="field"> 
 
        <input type="text" id="login-password" placeholder="Password"> 
 
       </div> 
 
       <div class="field"> 
 
        <select class="gender-name"> 
 
        </select> 
 
       </div> 
 
       <div class="field">  
 
        <select class="region-place"> 
 
        </select> 
 
       </div> 
 
       <div class="textarea"> 
 
        <textarea class="info" placeholder="Information"></textarea> 
 
       </div> 
 
      </div> 
 
     </form>

Answer 1

boyutlarda tutarsızlık nedeni, bu elemanlar genişlik değerlerine kadar ilave edilir padding sahip olmasıdır. box-sizing: border-box; ile genişliğe dahil edilmiştir.

Yani (inline) CSS bu ekleyin: http://codepen.io/anon/pen/mPXpeM

: Burada

#login-panel * { 
    box-sizing: border-box; 
} 

bir codepen var