title: Center align two divs in the same row
body: <p>I have a JavaScript script that basically hides a box upon clicking the top two boxes. Upon clicking one of the boxes on top, one of the boxes on the bottom hides. How do I make the two boxes on the bottom stay centered?</p>
  
  <p>Here is the landing page:</p>
  
  <p><img src="https://i.stack.imgur.com/naPtr.png" alt="Diagram 1"></p>
  
  <p>I want the divs on the bottom centered, once a box is hidden. I want the SharePoint and Teams boxes centered after the other box is hidden.</p>
  
  <p><img src="https://i.stack.imgur.com/uCA7D.png" alt="Diagram 2"></p>
  
  <p>Center the bottom two div's after change ^</p>
  
  <p>Code:</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-css lang-css prettyprint-override"><code>.margin-bottom-20 { 
   margin-bottom: 20px; 
  }
  
  .collabProjects:hover, .collabFiles:hover, .collabSocially:hover {
    box-shadow: 0 0 15px rgba(33,3,3,.2); 
  }
  
  .decisionTreeBox {
   background-color: #4B92DB;
   color: white;
   width: 300px;
   height: 140px;
   display: flex;
     justify-content: center;
     align-items: center;
     transition: box-shadow .3s;
  }
  
  #decisionTreeOneDrive {
   background-color: #094AB2;
   color: white;
   width: 300px;
   height: 140px;
   display: flex;
     justify-content: center;
     align-items: center;
  }
  
  
  #decisionTreeSharePoint {
   background-color: #008CE7;
   color: white;
   width: 300px;
   height: 140px;
   display: flex;
     justify-content: center;
     align-items: center;
  }
  
  #decisionTreeTeams {
   background-color: #4A1EBD;
   color: white;
   width: 300px;
   height: 140px;
   display: flex;
     justify-content: center;
     align-items: center;
  }
  
  #innerBoxHeadings {
   color: white!important; 
   text-align: center; 
   padding-top: 5px;
  }
  
  #columnMiddleBorderLeft, #pageTitle {
   display:none!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer-container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6" style="text-align: center;"&gt;
        &lt;div data-collaborate="shareCollab" class="decisionTreeBox" style="font-size: x-large; float: right;"&gt;
          Share and Collaborate&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6" style="text-align: center;"&gt;
        &lt;div data-collaborate="shareExternally" class="decisionTreeBox" style="font-size: x-large;"&gt;
          Share Externally&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr /&gt;
    &lt;div class="container" style="padding: 0px;"&gt;
      &lt;div class="row"&gt;
        &lt;a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"&gt;
          &lt;div class="col-md-4 margin-bottom-20" style="text-align: center;"&gt;
            &lt;div data-decision="shareExternally" id="decisionTreeOneDrive"&gt;
              &lt;h3 id="innerBoxHeadings"&gt;&lt;img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" /&gt;OneDrive&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/a&gt;
         &lt;a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx"&gt;
          &lt;div class="col-md-4 margin-bottom-20" style="text-align: center;"&gt;
            &lt;div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint"&gt;
              &lt;h3 id="innerBoxHeadings"&gt;&lt;img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" /&gt;SharePoint&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx"&gt;
          &lt;div class="col-md-4 margin-bottom-20" style="text-align: center;"&gt;
            &lt;div data-decision="shareCollab" id="decisionTreeTeams"&gt;
              &lt;h3 id="innerBoxHeadings"&gt;&lt;img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" /&gt;Teams&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
     function projectCollab() {
       var divsToCange = document.querySelectorAll('[data-decision]'),
        attr = this.getAttribute('data-collaborate');
     
       for (var i = 0; i &lt; divsToCange.length; i++) {
        var d = divsToCange[i];
     
       if (d.getAttribute('data-decision').includes(attr)) { /* Had: == attr) { */
        d.parentNode.style.display = 'block';
       } else {
        d.parentNode.style.display = 'none';
        }
       }
       return false;
       }
     
       var divButtons = document.querySelectorAll('[data-collaborate]');
     
       for (var i = 0; i &lt; divButtons.length; i++) {
        divButtons[i].addEventListener('click', projectCollab);
     }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>