Как выровнять изображение по тексту?

Question

[Edward]

Прошу понимающий людей объяснить или написать код...

Вот так должно получится


Вот так получается у меня


HTML

spoiler

<section id="pluses">
        <p class="pluses">Dignity and pluses product</p>
        <div class="l_r">
        <div class="left_p">
            <ul>
                <li>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
                <li>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
                <li>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
            </ul>
        </div>
        <div class="right_p">
            <ul>
                <li>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
                <li>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
                <li>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
            </ul>  
        </div>
        </div>
    </section>

CSS

spoiler

#pluses {
    height: 419px;
    background-color: #f5f5f5;
}

.pluses {
    color: #445162;
    font-size: 30px;
    margin-left: 40%;
}

.l_r {
    margin-left: 50px;
}

.left_p {
    float: left;
    width: 50%;
    list-style-image: url(../image/plus.png);
    font-size: 16px;
}

.right_p {
    float: right;
    width: 50%;
    list-style-image: url(../image/plus.png);
}

Comments

[Сергей Тутуков]

:before

[Edward]

Сергей Тутуков: расписать можете?

[Сергей Тутуков]

Эдуард Богач: codepen.io/STutukov/pen/bqRRrz?editors=0100

[Максим Тимофеев]

getbootstrap.com/components/#media

[Edward]

Спасибо большое

Answer 1

[Егор Живагин]

Патамушта list-style-image - зло злодейское :)
Я бы ответил серьёзнее, но, я так понял, ответ уже дали в комментах. :before, конечно

Answer 2

[igumenov]

Лучше через бекграунд реализовать

.pluses ul{
liat-style: none;
padding:0;
}
.pluses ul li {
    background: url(../image/plus.png) no-repeat top left;
padding-left: 40px;
}