I have a twitter-bootstrap & thymeleaf project where I need to have two form tags covering the respective parts of the page as shown below:

[![page layout](https://i.stack.imgur.com/4HPGZ.jpg)](https://i.stack.imgur.com/4HPGZ.jpg)

The area represented by the **black box** contains two text areas and a submit button. Users can type text into textbox1 and hit submit. the text they type is displayed in textbox2 as date+time+user+commentstring. At the same time it is save in the data base. textbox2 is to hold multiple comments each prefixed with date time and user.

The area represented by the **red box** is the remainder of the form - it has several fields that will be sent to the backend when the main submit button is clicked.

I understand tags must be closed within the element that they are opened in. Given this constraint - can I have a form tag that covers the red area using bootstrap grid layout. Non-layout centered solutions are welcome.

Thanks

**UPDATE 1**

Here is a fiddle to demonstrate better : 

`Layout example` <https://jsfiddle.net/0an6vwdq/8/>

The two large text boxes and *submit note* button are area 1. The rest is area 2.

**UPDATE 2**

The fiddle has the second set of form tags starting on line 24 and closing on line 54 - right after due date picker - the form tags close early and miss the dynamic list at the bottom of the page.

I had to close them early because of the bootstrap grid system and the opening tag being inside a row.

So the question is still how to maintain this layout with bootstrap grid system but have second form tags cover remainder of page.