title: Why are my side by side scrolling divs on different levels?
body: <p>I've set up a system of side by side scrolling divs (code below). However, whenever there is a different amount of content in them, they appear on different levels (as seen in the below picture). I'm not quite sure what's going on and I have a feeling it has something to do with the CSS <code>display</code> attribute. Code is included. This project is using Bootstrap. The brackets in my code are from my CMS. It's automatically embedding content.
  Here's a representative JSFiddle: <a href="https://jsfiddle.net/d8jopwnr/" rel="nofollow noreferrer">https://jsfiddle.net/d8jopwnr/</a></p>
  
  <p>My HTML code: 
      </p>
  
  <pre><code>        &lt;div class="row"&gt;
  
              &lt;div class="col-lg-10 col-lg-offset"&gt;
                  {exp:channel:entries channel="Constructs" limit="1"}
                  &lt;h1&gt;{title} &lt;span class="header-box"&gt;{abbreviation}&lt;/span&gt;&lt;/h1&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="container level-box"&gt;
                      &lt;div class="row"&gt;
  
                          {if summary!=""}
                          &lt;div class="level col-md-4"&gt;
                              &lt;h4&gt;Summary&lt;/h4&gt;
                              {summary}
  
  
                              &lt;a href="http://www.google.com"&gt;Download ToAM° Construct Map&lt;/a&gt;
                          &lt;/div&gt;
                          {/if} {if level_1!=""}
                          &lt;div class="level col-md-4 col-md-offset-1 shift-margin-level"&gt;
                              &lt;h4&gt;{title} Level 1: {level_1_title}&lt;/h4&gt;
                              {level_1}
  
                              &lt;a href="www.google.com"&gt;Download ToAM° Construct Map&lt;/a&gt;
                          &lt;/div&gt;
                          {/if} {if level_2!=""}
                          &lt;div class="level col-md-4 col-md-offset-1 shift-margin-level"&gt;
                              &lt;h4&gt;{title} Level 2: {level_2_title}&lt;/h4&gt;
                              {level_2}
  
                              &lt;a href="www.google.com"&gt;Download ToAM° Construct Map&lt;/a&gt;
                          &lt;/div&gt;
                          {/if}
                          &lt;div class="level col-md-4 col-md-offset-1 shift-margin-level"&gt;
                              &lt;h4&gt;{title} Level 3: {level_3_title}&lt;/h4&gt;
                              {if level_3!=""}{level_3}{/if}
  
                              &lt;a href="www.google.com"&gt;Download ToAM° Construct Map&lt;/a&gt;
                          &lt;/div&gt;
                          {if level_4!=""}
                          &lt;div class="level col-md-4 col-md-offset-1 shift-margin-level"&gt;
                              &lt;h4&gt;{title} Level 4: {level_4_title}&lt;/h4&gt;
                              {level_4}
  
                              &lt;a href="www.google.com"&gt;Download ToAM° Construct Map&lt;/a&gt;
                          &lt;/div&gt;
                          {/if} {if level_5!=""}
                          &lt;div class="level col-md-4 col-md-offset-1 shift-margin-level"&gt;
                              &lt;h4&gt;{title} Level 5: {level_5_title}&lt;/h4&gt;
                              {level_5}
  
                              &lt;a href="www.google.com"&gt;Download ToAM° Construct Map&lt;/a&gt;
                          &lt;/div&gt;
                          {/if} {/exp:channel:entries}
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My Sass code (in my opinion, it's easier to understand than regular CSS. If you disagree, you can translate it to CSS <a href="https://www.sassmeister.com/" rel="nofollow noreferrer">here</a>):</p>
  
  <pre><code>$header-box-vertical-padding: 3px;
  $header-box-horizontal-padding: 6px;
  $box-height: 60%;
  
  .header-box {
      background-color: #0000FF;
      color: white;
      padding-top: $header-box-vertical-padding;
      padding-bottom: $header-box-vertical-padding;
      padding-right: $header-box-horizontal-padding;
      padding-left: $header-box-horizontal-padding;
      border-radius: 6px;
  }
  
  .level-box &gt; .row {
    overflow-x: auto;
    white-space: nowrap;
  }
  .level-box &gt; .row &gt; .col-md-4 {
    display: inline-block;
    float: none;
  }
  
  .level{
      height: 60%;
      border-radius: 16px;
      width: 200px;
      overflow-x: initial;
      white-space: normal;
      background-color: #0000FF;
      color: white;
      display: inline-block;
  
  }
  
  .shift-margin-level{ // used to adjust the spacing between levels on constucts
      margin-left: 5% !important;
  }
  
  
  .map-display{
      width:100%;
      border: lightblue solid 1px;
      border-radius: 4px;
      padding: 8px;
      margin-top: 10px;
  }
  
  .size{
      font-size: 36px;
  }
  
  .vertical-center{
      display:inline-block;
      vertical-align:middle;
  }
  
  
  
  
  // scrollbar stuff
  .level-box::-webkit-scrollbar-track
  {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  .level-box::-webkit-scrollbar
  {
      width: 6px;
      background-color: #F5F5F5;
  }
  
  .level-box::-webkit-scrollbar-thumb
  {
      background-color: #000000;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JfBgk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JfBgk.png" alt="Non aligned divs"></a></p>