title: Incorrect textbox dimensions in html form
body: <p>I am having incorrect dimensions of my textbox in a simple HTML form. As I am trying to add Pincode-city-state validations. I tried to change it , but it is again same. Below is the snippet of my code. Please help me with my code</p>
  <p>index.html</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>```
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=\, initial-scale=1.0"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      #pincode{width:21%;}
      .textbox{
          width: 30%;
          box-sizing: border-box;
          border: 2px solid #ccc;
          border-radius: 4px;
          font-size: 16px;
          background-position: 10px 10px;
          background-repeat: no-repeat;
          padding: 12px 20px 12px 40px;
          -webkit-transition: width 0.4s ease-in-out;
          transition: width 0.4s ease-in-out;
          margin-left:2%;
      }
      /* CODE */
      .btn{
          font-weight: 400;
          text-align: center;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          padding: 6px 12px;
          font-size: 14px;
          border-radius: 4px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          height: 46px;
          color: #fff;
          background-color: #5cb85c;
          border-color: #4cae4c;
          margin-left:2%;
  
      }
      h2{font-family:Arial; font-size:30px; text-align:center;}
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div&gt;&lt;h2&gt;Get city from Pincode&lt;/h2&gt;&lt;/div&gt;
          &lt;div&gt;&amp;nbsp;&lt;/div&gt;
          &lt;form autocomplete="off" method="post" id="frmPinCode" style="text-align:center;"&gt;
          &lt;div&gt;
  
          &lt;input type="text" class="textbox" name="pincode" id="pincode" placeholder="Enter Pincode" autocomplete="new-password"&gt;
          &lt;input type="button" class="btn" value="Get Details"&gt;
  
  &lt;/div&gt; 
  &lt;div&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div&gt;
     &lt;input type="text" class="textbox" id="city" disabled placeholder="City"&gt;&lt;br/&gt;&lt;br/&gt;
     &lt;input type="text" class="textbox" id="state" disabled placeholder="State"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  ```</code></pre>
  </div>
  </div>
  </p>
  <p>Below is the screenshot of how my form looks.</p>
  <p><a href="https://i.stack.imgur.com/UnTJ1.png" rel="nofollow noreferrer">index.html</a></p>