need inner divs to align top-wise in container div

Question

The outermost container div has two inner divs - the right-side inner div has text that can grow or shrink based on user input (to come later, a lot of text is simulated now in the text div by setting its height:250px). The weird thing is -- as the right-side inner div's height grows -- the left side inner div 'falls' downward in the outer div. I put colored outlines around the divs -- the left inner div, the one with the 'falling' problem has a blue outline. The 'growing due to user-entered text' is the inner div on the right with the purple border.

The outer container of the 2 inner divs has an orange outline.

I need the left div with the blue border to be 100% UNAFFECTED or un-influenced by the amount of text entered. That left div with the blue border must stay in the top-left corner of the outer container div that has the orange border.

Why does the height of a box in the right-side green div push the left div downward?

Here's a link to see what's happening:

http://jsfiddle.net/Shomer/JSyYY/

Here's the code:

<div style="display:inline-block; border: 4px solid orange;">
    <div style="border: 2px solid blue; display:inline-block;">
      <div style="display:inline-block; border: 1px solid red;">topleft
      </div>
      <div style="display:inline-block; border: 1px solid red;">topright
      </div>
      <div>lower div
      </div>
    </div>

   <div style="display:inline-block; border: 3px solid purple;">
    <div style="display:inline-block; height:250px; border: 1px solid red;"> "text"
   </div>
   <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b>
   </div>
    <div>&nbsp; </div>
  </div>
/div>

Answer 1

Hiyou should try setting the vertical Align to top of the parent div of the blueborder div.

<div style="display:inline-block; border: 4px solid orange;" >
    <div style="border: 2px solid blue; display:inline-block;**vertical-align:top**">
          <div style="display:inline-block; border: 1px solid red;">topleft
          </div>
          <div style="display:inline-block; border: 1px solid red;">topright
          </div>
          <div>lower div
          </div>
          <!-- <div>a</div> -->
    </div>

    <div style="display:inline-block; border: 3px solid purple;">
        <div style="display:inline-block; height:250px; border: 1px solid red;"> "text"
       </div>
       <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b>
       </div>
        <div>&nbsp; </div>
    </div>
</div>