Как поместить текст на уровне геометрической фигуры?

Question

[lesha2008]

.block_1 {
    width: 500px;
    display: block;
    
}

.text {
    float: left;
    font-size: 17px;
    line-height: 21px;
    font-weight: 400;
    color: #1eacc7;
    margin: 0px 0 0 150px;
}

.para {
    max-width: 500px;
    margin: 0 0 0 150px;
    font-size: 15px;
    font-weight: 300;
}

.radius {
    margin: 40px 0 0 150px;
    width: 109px;
    height: 109px;
    border-radius: 100%;
    background-color:#1eacc7;
    display: inline-block;
    /* box-sizing: border-box; */
}

.radius_2 {
    margin: 0px 0 0 700px;
    width: 109px;
    height: 109px;
    border-radius: 100%;
    background-color:#1eacc7;
    display: inline-block;
    /* box-sizing: border-box; */
}

У меня получается что текст находится под фигурой, margin по нулям, как поместить текст на уровне фигуры?
У меня получается вот так https://imgur.com/HzvxuRr
А должно быть вот так https://imgur.com/RfZclnu

<section class="work">
      <div class="container">
        <div class="row">
          <button class="benefits_btn">ПРЕИМУЩЕСТВА</button>
          <div class="work_header">8 ПРИЧИН РАБОТАТЬ С НАМИ</div>
        </div>
        <div class="container">     
        <div class="radius">
          <div class="radius_2"></div>
          <div class="block_1">
            <div class="text">Никаких наличных, оплата происходит
              автоматически</div>
              <div class="para">Стоимость поездки оплачивается пассажиром с привязанной банковской карты, т.е. нет никаких рисков связанных с перевозкой наличности как для пассажира, так и для водителя, Вам не нужно искать мелкие деньги для размена.
              </div>
              
          </div>
          
        </div>   
        </div>
          
        
    </section>

Comments

[Ankhena]

html код почему то не дает выгрузить на сайт :(

Имеет смысл прочитать правила и обратить внимание на то, что в окошке редактора вопроса есть разные кнопочки, в том числе для вставки картинок и кода.

И будет хорошо, если приложите код в песочнице codepen.io, так его удобнее и смотреть и править.

[lesha2008]

Ankhena, Исправил

[Ankhena]

lesha2008, извините, но я по-прежнему вижу картинки не тут в спойлере, а ссылками куда-то там.
И песочницы тоже не вижу.

Но ответить могу:
1. В современном мире для построения сеток используют флексы и гриды.
Флоаты используют только по назначению - для обтекания одного элемента другими или текстом.
В вашем макете никакого обтекания нет в помине.

2. Иконки являются украшениями, а не значимым контентом. В разметке они лишние. Такие штуки делают псевдоэлементами.

В разметке: список из 8 пунктов.
В каждом из которых заголовок и p.
Дальше гридом 2х2.
Псевдоэлемент располагается в первом столбце и двух рядах.

[Сергей delphinpro]

lesha2008, https://qna.habr.com/help/rules

3. В процессе создания вопроса пользователь Сервиса обязан:
3.9. Использовать для вставки изображений тег < img> (размещение ссылок на изображения без использования тега < img> запрещено).

Вот так:

Answer 1

[Андрей Галкин]

Вот пример, который может вам подойти: код тут