Why do these two div elements not align to the top using display inline block; vertical align: top?

Question

In the below code there are 2 child div elements .left and .right. Im using margin left to move the .right to the right and im using display inline block to make the div the size of the content and I thought that would help with getting the divs to align to the top of each other. the one on the right appears lower. why?

<style type="text/css">
    html,body{
        color:#fff;
    }

    .container {
      background: linear-gradient(
        to right, 
        #ff9e2c 0%, 
        #ff9e2c 50%, 
        #b6701e 50%, 
        #b6701e 100%
      );
      height: 500px;
      width: 100%;
    }
    .left{
        width:40%;
        padding: 10px;
        vertical-align: top;
    }
    .right{
        margin-left: 50%;
        padding: 10px;
        width: 40%;
        vertical-align: top;
    }
</style>

<section class="container">
    <div class="left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, consequuntur.</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor similique exercitationem reiciendis doloribus animi cupiditate laborum, mollitia ipsum ad? Perspiciatis?</div>
</section>

Answer 1

You didn't have inline-block on your .left and .right classes. If you add the following it works: JS Fiddle

.left, .right {display: inline-block;}
//and change the width of .right
.right {width: 40%; }

This isn't how I would recommend setting this up, but for this example, it works. I would recommend using a separate background for the .left and .right classes instead of using a gradient on the wrapper. This gives you a lot more flexibility and stability.

Answer 2

Setting every div as inline-block with 50% of width, the divs will resize with the page.

.left {
    display: inline-block; 
    width: 50%; 
}
.right {
    display: inline-block; 
    width: 50%; 
}

I suggest you to take a look at bootstrap rows

<row>
 <div class="left col-md-6"></div>
 <div class="right col-md-6"></div>
</row>

This solution doesn't require additional CSS, and you can customize the size of your divs according to the size of the screen.