In your code you need to apply margin: 0; padding: 0; to p tag.

The extra margin on p tag is the default css.

To remove default css styles from all element you need to add

* {
  margin: 0;
  padding: 0;
}

which I have added in following example.

Apart from this you are encouraged to go through different layout techniques like flexbox and grid.

* {
  margin: 0;
  padding: 0;
}

p {
  font-family: 'Source Code Pro', monospace;
  color: #a9a9a9;
  background-color: #4f4f4f;
  width: 12px;
  height: 360px;
  text-align: center;
  word-wrap: break-word;
  float: left;
}

textarea {
  font-family: 'Source Code Pro', monospace;
  resize: none;
  width: 472px;
  height: 360px;
  color: white;
  resize: none;
  background-color: black;
  border-radius: 0;
  float: left;
}

<link href="https://www.fonts.googleapis.com/css?family=Source%20Code%20Pro" rel="stylesheet">
<p>1</p>
<textarea></textarea>

You’re using a <p> but the P element comes with lots of built-in style properties to make text look “good” (that even will vary between browsers). This default styling is what is causing the improper alignment.

It’s much better to use a <div> instead, which has no default styling.

If we do that, and also set padding and border to 0 for the textarea, then it will align:

<div style=" font-family: 'Source Code Pro', monospace; color: #a9a9a9; background-color: #4f4f4f; width: 12px; height: 360px; text-align: center; word-wrap: break-word; float: left;">1</div>
<textarea style=" font-family: 'Source Code Pro', monospace; resize: none; width: 472px; height: 360px; color: white; resize: none; background-color: black; border-radius: 0; float: left; padding: 0; border: 0"></textarea>    

Place the <textarea> within a <li> of an <ol>. Not only is it perfectly semantic, the number is added automatically. There are just one simple adjustment to the CSS of the <textarea> in order to line-up the numbers correctly. If you don’t want <textarea> to resize just remove overflow: hidden.

textarea {
  display: table;
  ...
}

textarea {
  display: table;
  overflow: hidden;
}

li + li {
  margin-top: 0.25rem;
}

<ol>
  <li>
    <textarea></textarea>
  </li>
  <li>
    <textarea></textarea>
  </li>
</ol>

I believe you need to dive into flex css, this is go-to approach to align children objects in parent object

CSS Flexbox