title: Resizing page below 1200px causes content to shift
body: <p>I am still new to web dev, and in the beginning stages of working on this project.  My issue right now, is when resizing my display below 1200 pixels the content of my second form on the left side shifts.  The content of the TEXT changes from 2 lines to 3 lines and makes the bottom section extend further that the right side.  Trying to find a way to keep the content even across the bottom as the page resizes.  </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-js lang-js prettyprint-override"><code>var toggle = function(){
   var exists = document.querySelector("#existButton");
   console.log(exists.innerHTML);
  
  
   if(exists.classList.contains("btn-warning")){
    exists.classList.remove("btn-warning");
    exists.classList.add("btn-info");
    exists.innerHTML = "copy";
    //document.getElementById("#existButton").innerHTML = 'check'
   } else {
    exists.classList.remove("btn-info");
    exists.classList.add("btn-warning");
    exists.innerHTML="check";
    //document.getElementById("#existButton").innerHTML = 'copy'
   }
  
   
   
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   background: repeating-linear-gradient(
    to right,
    #050210,
    #050210 50px,
    #271f41 50px,
    #271f41 100px
   )
  }
  .jumbotron {
   margin-bottom: 0;
   background-color: #cbd0d3;
  
  }
  
  .container .jumbotron{
   border-radius: 0px;
  }
  .navbar{
   margin-bottom: 0;
   background-color: #44abe2;
   margin-top: 30px;
  
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a {
   color: white;
  
  }
  
  .navbar .navbar-default {
   border-radius: 0px;
  }
  
  .navbar-default .navbar-brand{
   color: white;
  }
  
  .automatic {
   background-color: #6e8a99;
   padding-bottom: 40px;
   border-bottom-left-radius: 6px;
  }
  
  .manual {
   background-color: #83929a;
   padding-bottom: 40px;
   border-bottom-right-radius: 6px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="bootstrap/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  
      &lt;link rel="stylesheet" href="style.css"&gt;
  
  
      &lt;title&gt;Mailbox Creator&lt;/title&gt;
    &lt;/head&gt;
  
  
    &lt;div class="container"&gt;
  
  
      &lt;nav class="navbar navbar-default" style="border-radius: 6px 6px 0px 0px"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          
          
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Mailbox Management &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;User Mailbox Management&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Resource Mailbox Management&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Mailbox Update Management&lt;/a&gt;&lt;/li&gt;            
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Hello $username&lt;/a&gt;&lt;/li&gt;
          
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  
  
    &lt;div class="jumbotron"&gt;
      &lt;h1 class="text-center"&gt;Mailbox Creator Pro&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;!--  ***************************************** --&gt;
    &lt;!--  **********  Automatic Forms ************* --&gt;
    &lt;!--  ***************************************** --&gt;
    &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 automatic"&gt;
        &lt;form&gt;
          &lt;!-- &lt;div class="form-group text-center"&gt;
            &lt;label&gt;&lt;u&gt;Automatic&lt;/u&gt;&lt;/label&gt;
          &lt;/div&gt; --&gt;
          &lt;h4 class="text-center pb-2"&gt;&lt;u&gt;Automatic&lt;/u&gt;&lt;/h4&gt;
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-3 col-form-label ml-2" for="accountName"&gt;Account Name&lt;/label&gt;
            &lt;div class="col-md-6"&gt;
              &lt;input class="form-control form-control-sm " type="text" name="accountNameAuto" value="" placeholder="Account number"&gt;
            &lt;/div&gt;  
            &lt;div class="col-md-2"&gt;
              &lt;button type="submit" class="btn btn-success btn-sm "&gt;Create&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;    
        &lt;/form&gt;
        &lt;form&gt;
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-3 col-form-label ml-2" for="emailCheckAutomatic" style="min-width: 140px"&gt;Does account have email?&lt;/label&gt;
            &lt;div class="col-md-6 mt-3"&gt;
              &lt;input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account"&gt;
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
              &lt;button type="submit" class="btn btn-info btn-sm mt-3"&gt;Check&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;textarea class="form-control form-control-sm mb-1" &gt;&lt;/textarea&gt;
  
  
      &lt;/div&gt;
  
  
    &lt;!--  ***************************************** --&gt;
    &lt;!--  **********  Manual Form  ***************** --&gt;
    &lt;!--  ***************************************** --&gt;
      &lt;div class="col-md-6 manual"&gt;
        &lt;form&gt;
          &lt;!-- &lt;div class="form-group text-center"&gt;
            &lt;label&gt;&lt;u&gt;Manual&lt;/u&gt;&lt;/label&gt;
          &lt;/div&gt; --&gt;
          &lt;h4 class="text-center pb-2"&gt;&lt;u&gt;Manual&lt;/u&gt;&lt;/h4&gt;
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-1 col-form-label ml-1 " for="accountName"&gt;Email&lt;/label&gt;
            &lt;div class="col-md-5"&gt;
              &lt;input class="form-control form-control-sm " type="text" name="accountNameManual" value="" placeholder="Email"&gt;
            &lt;/div&gt;
            &lt;label class="col-md-2 col-form-label" for="accountName"&gt;Account&lt;/label&gt;
            &lt;div class="col-md-2"&gt;
              &lt;input class="form-control form-control-sm" type="text" name="" value="" placeholder="S#"&gt;
            &lt;/div&gt;
            &lt;div class="col-md-1"&gt;
              &lt;button type="submit" class="btn btn-success btn-sm"&gt;Create&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/form&gt;
  
  
        &lt;form&gt;
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-1 col-form-label ml-1" for="emailCheckAutomatic"&gt;Email exist?&lt;/label&gt;
            &lt;div class="col-md-5 mt-3"&gt;
              &lt;input class="form-control form-control-sm" type="text" name="emailCheckAutomatic" value="" placeholder="check for email account"&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4 mt-3"&gt;
              &lt;button type="submit" class="btn btn-info btn-sm" id="existButton" onclick="toggle()"&gt;Check&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-md-1 mt-3"&gt;
              &lt;button type="submit" class="btn btn-warning btn-sm"  &gt;Copy&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;textarea class="form-control form-control-sm mb-1" &gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;&lt;!-- End Row --&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;/div&gt;&lt;!-- End Container --&gt;
  
  
    
  
  
  
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script src="scripts/script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>