html - Get second line of bullet item to indent as first part - not underneath the bullet?

Question

When an item in my bulleted list is long enough to wrap, I need the wrapped part to line up on the left with the first line, starting to the right of the bullet, rather than starting underneath the bullet.

How can I achieve this?

At the moment I've got the following code.

CSS and HTML

.row2 {
      padding: 20px 20px 5px 20px;
      height: auto;
      overflow: hidden;
  max-width: 500px; }

    .red-square-5 {
      width:5px;
  height:5px;
  background:#f00;
  display:inline-block; }

<div class="row2">
<p><div class="red-square-5"></div>&nbsp;&nbsp;Long long long long long long long long long long long long long long long long long long long long long long long long long title</p>
</div>

Answer 1

My take on this would be to include the bullet in another div and then wrap both divs in a container div.

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}

<div class="container-div">
    <div class="red-square-5"></div>
    <div class="row2">
        Long long long long long long long long long long long 
        long long long long long long long long long long long 
        long long long title
    </div>
</div>