Unexpected result with siblings container not being correctly aligned

Question

I have the current jsfiddle

in which I wish to include a scroll-x instead of wrapping:

+----------------------------------+
|+---------+ +--------------------+|
||  33%    | |  width: normally   ||
||         | |  66%; otherwise    ||
|| min:    | |  min-width:600px   ||
||   300px | |                    ||
|+---------+ +--------------------+|
+----------------------------------+
|<|                 |=|          |>|
+----------------------------------+

This works, only when I have different amounts of text entered, the dives are not aligned to top:

Instead:

+----------------------------------+
|+---------+                       |
||         |                       |
||         | +--------------------+|
||         | |                    ||
||         | |                    ||   <----  I get something like this
|+---------+ +--------------------+|
+----------------------------------+
|<|                 |=|          |>|          
+----------------------------------+               

Is there a fool-proof way of ensuring that (instead) they go like:

+----------------------------------+
|+---------+ +--------------------+|
||         | |                    ||
||         | |                    ||
||         | +--------------------+|
||         |                       |   
|+---------+                       |
+----------------------------------+
|<|                 |=|          |>|          
+----------------------------------+          

My css looks like:

.firstDiv{
    display:inline-block;
    min-width:300px; 
    width:33%;
    background-color:red; 
    white-space:normal;
}
.secondDiv{
    display:inline-block;
    min-width:600px; 
    width:66%;
    background-color:orange; 
    white-space:normal;
}

.parent{
    overflow-x:scroll; 
    white-space:nowrap; 
    background-color:blue;
    height:400px; 
    width:100%; 
    top:0;
}

Any suggestions?

Edit

I forgot to mention that I would have content below it too, something like:

+----------------------------------+
|+---------+ +--------------------+|
||         | |                    ||
||         | |                    ||
||         | +--------------------+|
||         |                       |   
|+---------+                       |
|+---------+ +--------------------+|
||         | |                    ||
|+---------+ +--------------------+|
+----------------------------------+
|<|                 |=|          |>|          
+----------------------------------+

etc.

Answer 1

Apply vertical-align: top; for those divs:

.firstDiv{
    display:inline-block;
    min-width:300px; 
    width:33%;
    background-color:red; 
    white-space:normal;
    vertical-align: top;
}
.secondDiv{
    display:inline-block;
    min-width:600px; 
    width:66%;
    background-color:orange; 
    white-space:normal;
    vertical-align: top;
}

demo

check this demo with your updated question : after the second div I've used clear: both; to go them below.

Answer 2

You could add vertical-align: top at firstDiv element

.firstDiv{
    display:inline-block;
    min-width:300px; 
    width:33%;
    background-color:red; 
    white-space:normal;
    vertical-align: top;
}

An example: http://jsfiddle.net/dkyzavj6/1/