What CSS code can I use to style this how I want?

Question

Quick Image #2

How can I move this text box up and put information in the circled area in CSS? I am more of the developer type rather than a designer, so I need help with this. The text area should be exactly the same. Thanks!

EDIT: As for the rest of the form, I want it to be centered in the second half of the screen. Hopefully I clarified.

Answer 1

Try this;

<div style="float:left;width:200px;height:200px">
    <textarea style="width:100%;height:100%"></textarea>
</div>
<div style="float:left;width:200px;height:200px">
    <div>
        <input type="text">
    </div>
    <div>
        Circled Area
    </div>
</div>

Answer 2

use div float:left property for that

DEMO:

div.main{
float:left;
}
.txt{
  height:600px;
  width:300px;
}

<div class="main">
  <input type="textarea" class="txt">
</div>
<div class="main">
  <div>
  <input type="text" class="txt2"></div>
  
  <div>
  <input type="text" class="txt2"></div>
</div>

other method

you can use <br> tag DEMO

div.main{
float:left;
}
.txt{
  height:600px;
  width:300px;
}

<div class="main">
  <input type="textarea" class="txt">
</div>
<div class="main">
  
  <input type="text" class="txt2">
  <br>
  <input type="text" class="txt2">
  <br>
  <input type="text" class="txt2">
</div>

Answer 3

Float the text area to the left and put a div around the circled content and float it right. The text box will rise to the top in the middle.