jQuery UI resizable issues on horizontal textareas alignment and width changing

jQuery UI resizable issues on horizontal textareas alignment and width changing

Hi. I originally posted a question to a problem I was having on stack overflow, but have yet to receive a response.  So I will repost my link to that question  here.  Essentially what I am trying to create is my own live code editor. I will have a HTML, CSS, and JS panel.  These panels are textareas that I would like to be resizable.   Currently, I am having a problem with the textarea flowing vertically instead of horizontally. Strange as textarea display is supposed to default to inline-block.  

I tried using float:left, but the textarea elements still flow outside of its container.

Would appreciate some brilliant insight as to how to fix this.