title: How to make HTML form input fields responsive without using Bootstrap
body: <p>I have a really basic HTML form with two text input fields side by side (Name and Company) and a Submit and Back button underneith. </p>
  
  <p>I want to make the width of my input fields scale down as the browser width is decreased.</p>
  
  <p>See 1st attached image for how it currently looks at full width, and 2nd attached image for how I want it to look when the browser window is decreased.</p>
  
  <p><a href="https://i.stack.imgur.com/mE753.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mE753.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/UAUTr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UAUTr.jpg" alt="enter image description here"></a></p>
  
  <p>I've tried wrapping the whole Form in a Div and setting the Div to width: 100%; but it has no effect.. I've also tried various other tweaks but feel like I'm blowing in the wind as I don't really know what I should be changing.. any ideas? </p>
  
  <pre><code>&lt;form action="" method="post"&gt;
      &lt;div class="row" align="center"&gt;
  
          &lt;div class="column left"&gt;
              &lt;label for="name"&gt;Name&lt;span class="err"&gt;&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
              &lt;input id="name" type="text" name="Name"&gt;&lt;br&gt;
          &lt;/div&gt;
          &lt;div class="column right"&gt;
              &lt;label for="company"&gt;Company&lt;span class="err"&gt;&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
              &lt;input id="company" type="text" name="Company"&gt;&lt;br&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div align="center"&gt;
          &lt;a href="#"&gt;&lt;button class="back-btn" type="button"&gt;Back&lt;/button&gt;&lt;/a&gt;
          &lt;input class="sign-in-btn" type="submit" value="Sign In"&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  
  
  
      * {
          box-sizing: border-box;
      }
  
      .row {
          display: flex;
          flex-direction: row;
          justify-content: center;
          padding-top: 45px;
          text-align: left;
      }
  
  
      input[type=text], select {
          width: 550px;
          height: 100px;
          margin: 10px 15px 50px;
          border: 3px solid #d9569f;
          border-radius: 50px;
          outline: none;
          font-family: sofia-pro-soft, sans-serif;
          font-weight: 300;
          font-size: 30px;
          text-align: center;
          text-align-last: center;
      }
  
  
      label {
          font-family: sofia-pro-soft, sans-serif;
          font-weight: 300;
          font-size: 30px;
          color: #555;
          margin-left: 30px;
      }
  
  
      input.sign-in-btn {
          width: 250px;
          height: 100px;
          border: 3px solid #fff;
          border-radius: 50px;
          outline: none;
          font-family: sofia-pro-soft, sans-serif;
          font-weight: 300;
          font-size: 30px;
          color: #fff;
          background: #d9569f;
          margin-left: 30px;
      }
  
  
      .sign-in-btn:active {
          color: #d9569f;
          background-color: #fff;
          border: 3px solid #d9569f;
      }
  
  
      .back-btn {
          width: 250px;
          height: 100px;
          border: 3px solid #fff;
          border-radius: 50px;
          outline: none;
          font-family: sofia-pro-soft, sans-serif;
          font-weight: 300;
          font-size: 30px;
          color: #fff;
          background: #d9569f;
          margin-right: 30px;
      }
  
  
      .back-btn:active {
          color: #d9569f;
          background-color: #fff;
          border: 3px solid #d9569f;
      }
  
  
      a {
          color: #fff;
          text-decoration: none;
      }
  </code></pre>