Поместите тексты в определенные позиции внутри адаптивного div с фоновым изображением

Question

У меня есть приложение реагирования, и я пытаюсь поместить тексты в определенные позиции в адаптивном элементе div с фоновым изображением. Когда я меняю высоту / ширину устройства или увеличиваю тексты, я не останусь в нужном месте. Весь график ниже - мой фон.

Я попытался установить относительное и фиксированное положение в текстах, с верхним и левым в%, что соответствует серым прямоугольникам в моем css.

Весь компонент

  <Modal.Body>
    <Row className="textBodyHeader">
      <Col>
        <h6>PETR4, PETROBRAS PN N2 4,17</h6>
      </Col>
    </Row>
    <Row>
      <Col>
        <FormInternoCompraAgendada />
      </Col>

      <Col className="colGrafico">
        <div class="valorTotalGrafico">26,50</div>
        <div class="GainDisparoGrafico">26,50</div>
      </Col>
    </Row>
  </Modal.Body>

Div с фоновым изображением из кода выше

<Col className="colGrafico">
        <div class="valorTotalGrafico">26,50</div>
        <div class="GainDisparoGrafico">26,50</div>
      </Col>

Мой CSS

.colGrafico {
  background-image: url("../img/compraAgendada.PNG");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}

.valorTotalGrafico {
  color: #000;
  position: fixed;
  top: 55%;
  left: 97.5%;
  font-size: 2vmin;
  font-weight: 700;
}

.GainDisparoGrafico {
  color: #000;
  position: fixed;
  top: 33.3%;
  left: 130%;
  font-size: 2vmin;
  font-weight: 700;
}

Основной компонент.

Я ожидаю пять текстов (26,50) в этих серых прямоугольниках в этом разделе.