See here for the final result: http://codepen.io/anon/pen/JdGLNK

You're looking for the input tag. See here.

<input type="text" name="input" value="Type here">

You should use the label tags to give it a label so users know what to enter into it, and form tags to wrap the whole lot. If you use the label tag you'll need to give it a for attribute whiche matches the name attribute of the input:

<form>
  <label for="input">This is the label:</label>
  <input type="text" name="input">
</form>

To give it an initial size (calculated by the number of characters) add the size property:

<form class="input-form">
  <label for="input">This is the label:</label>
  <input type="text" name="input" size="24" placeholder="Type here">
</form>

If it's a required field you should use the required attribute to auto-populate browser actions in modern browsers. Be sure to add the relevant ARIA attribute as well.

<form class="input-form">
  <label for="input">This is the label:</label>
  <input type="text" name="input" size="24" placeholder="Type here" required aria-required="true">
</form>

Finally, if you need to have it inline, you should include paragraph text within the form:

<p>There's so much text here!</p>
<form class="input-form">
  <p>Here's some inline text. <label for="input">This is the label:</label>
    <input type="text" name="input" size="24" placeholder="Type here" required aria-required="true">
  And here's some text after the input.
  </p>
</form>
<p>Here's some more text</p>

Styling is quite easy with CSS3. Select input[type="text"] and give it the styles you need:

input[type="text"] {
  padding: 5px;
  line-height: 1.66em;
  background-color: #f00;
  color: #fff;
  width: 300px;
  border: 1px solid #000;
}

If you don't have a stylesheet then include that within the head tag at the top of your document wrapped in style tags:

<style>
  input[type="text"] {
    padding: 5px;
    line-height: 1.66em;
    background-color: #f00;
    color: #fff;
    width: 300px;
    border: 1px solid #000;
  }
</style>

padding and line-height will ensure the text doesn't contact the border and looks good, background-color controls your background color, but be sure to adjust color to match.

Lastly, you can use width to give it the exact width in px you'd like (this overrides the size html attribute).

BONUS: give a border to get rid of the boring styles set by the browser.