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

when item in bulleted list long enough wrap, need wrapped part line on left first line, starting right of bullet, rather starting underneath bullet.

how can achieve this?

at moment i've got following code.

css , 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>

my take on include bullet in div , wrap both divs in 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>

and solution using unordered list, seen here: how set bullet colors in ul/li html lists via css without using images or span tags

ul {    list-style: none;    padding: 0;    margin: 0;  }    li {    padding-left: 1em;     text-indent: -0.8em;  }    li::before {    content: "■ ";    color: red; /* or whatever color prefer */  }

<ul>    <li>long long long long long long long long long long long long long long long long long long lng long long long long long long title    </li>  </ul>