Как добавить текст в прямоугольник с закругленными углами, разделенный кружком

Question

У меня есть такой div:

И закодировано так:

      <div class="col-12 p-5 mb-3">
    <div class="mainInfo">
        <div class="circle">
            <img src="larger-logo.jpg"> 
        </div>
    </div>
</div>

И я хотел добавить текст с левой стороны формы круга, а также с правой стороны:

Итак, я попробовал это:

      <div class="col-12 p-5 mb-3">
    <div class="mainInfo">
        <div class="circle">
            <img src="larger-logo.jpg"> 
        </div>
        <div class="paraDivLeft">
            <h6>Site Name</h6>
            <hr>
            <p>www.sitename.com</p>
            <p>[e-mail]</p>
        </div>
        <div class="paraDivRight">
            <p>Address</p>
            <p>Postal Code</p>
            <p><strong>Phone Number</strong></p>
        </div>
    </div>
</div>

Но результат далек от ожидаемого:

Итак, как правильно добавить тексты к правой стороне формы круга и левой стороне?

А вот и коды css:

      .mainInfo{
    background-color: #fff;
    border: .01rem round #e0e1ed;
    border-radius: 20px;
    color: #585CA1;
    width:100%;
    height:5em;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
    margin-top: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle {
    position: relative;
    left:20%;
    width: 9em;
    height: 9em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}

.circle img {
    position: absolute;
    max-width: 85%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

ОБНОВИТЬ:

Я добавил этот CSS:

      .mainInfo{
    background-color: #fff;
    border: .01rem round #e0e1ed;
    border-radius: 20px;
    color: #585CA1;
    width:100%;
    height:5em;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
    margin-top: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle {
    position: relative;
    left:20%;
    width: 9em;
    height: 9em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}

.circle img {
    position: absolute;
    max-width: 85%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}
.paraDivLeft{
  position: absolute;
  left: 16px;
}

.paraDivRight{
  position: absolute;
  right: 16px;
}

Все еще показываю, как это:

Answer 1

Я думаю, что то, что у вас есть, в основном будет работать, просто измените высоту строки на 1em или что-то в этом роде.

Вот моя попытка. Я также добавил «сверху», а затем «слева» или «справа», чтобы отойти от краев с абсолютным позиционированием. Я также использовал выравнивание текста для каждого раздела paraDiv:

Answer 2

Можно использовать макет CSS — свойство position для этого. Добавьте значения положения, как показано ниже, в классы mainInfo, paraDivLeft и paraDivRight в файле CSS.