How to create side by side textareas?

I want to create 4 textareas in one row, each with its own title, this is the illustration of what I wanna do:

enter image description here

I've tried this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
</head>

<body>
<div style="float:left;">
    <p>
        title1<br />
        <textarea cols="15" rows="15">
        textarea1
        </textarea><br />
        title2<br />
        <textarea cols="15" rows="15">textarea2</textarea>
    </p>
</div>
</body>
</html>

Instead it creates 2 textareas in 2 rows, I want 4 textareas in one row and a title centered on each textarea. How do I do that?

Solution

to make it more perfect add a common class to each of the div and apply css like below:

Html

<div class="inline-div">
    <p align="center">Title 1</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
<p align="center">Title 2</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
    <p align="center">Title 3</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
    <p align="center">Title 4</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>

Css

.inline-div {
    display:inline-block;
}
.inline-txtarea {
    resize: none;
    border : 2px solid red;
    height:125px;
}

Fiddle Demo