Why are my side by side scrolling divs on different levels? - html

Question

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 display 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: https://jsfiddle.net/d8jopwnr/
My HTML code:
<div class="row">
<div class="col-lg-10 col-lg-offset">
{exp:channel:entries channel="Constructs" limit="1"}
<h1>{title} <span class="header-box">{abbreviation}</span></h1>
<br>
<br>
<div class="container level-box">
<div class="row">
{if summary!=""}
<div class="level col-md-4">
<h4>Summary</h4>
{summary}
Download ToAM° Construct Map
</div>
{/if} {if level_1!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 1: {level_1_title}</h4>
{level_1}
Download ToAM° Construct Map
</div>
{/if} {if level_2!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 2: {level_2_title}</h4>
{level_2}
Download ToAM° Construct Map
</div>
{/if}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 3: {level_3_title}</h4>
{if level_3!=""}{level_3}{/if}
Download ToAM° Construct Map
</div>
{if level_4!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 4: {level_4_title}</h4>
{level_4}
Download ToAM° Construct Map
</div>
{/if} {if level_5!=""}
<div class="level col-md-4 col-md-offset-1 shift-margin-level">
<h4>{title} Level 5: {level_5_title}</h4>
{level_5}
Download ToAM° Construct Map
</div>
{/if} {/exp:channel:entries}
</div>
</div>
</div>
</div>
</div>
My Sass code (in my opinion, it's easier to understand than regular CSS. If you disagree, you can translate it to CSS here):
$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 > .row {
overflow-x: auto;
white-space: nowrap;
}
.level-box > .row > .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;
}

Answer 1

If you add a small line of code to the .col-md-4 to set the vertical-align: top then the first box will align to the top of the container with the rest.
.level-box > .row > .col-md-4 {
vertical-align: top;
display: inline-block;
float: none; }