Как разместить один div рядом с другим

Question

У меня есть одно изображение, похожее на солнечную систему, и я пытаюсь поместить один <div> рядом с каждым кругом (по центру по вертикали), используя только CSS.

Я бы не хотел использовать JavaScript. В коде вы увидите 2 планеты с текстовым полем.

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f2f2f2;
}

#content {
  width: 100%;
  height: calc(100vh - 225px);
  overflow: hidden;
  margin-top: 25px;
}

.outer_face {
  width: calc(90vh * 0.7);
  height: calc(90vh * 0.7);
  border-radius: calc(90vh * 0.7);
  border: 1px solid black;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.outer_face .marker {
  /* All hour markers */
  background: #000;
  height: 50%;
  left: 50%;
  position: absolute;
  top: 0%;
  transform-origin: 50% 100%;
  width: 1px;
}

.outer_face .marker.marker-three {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.outer_face .marker.marker-one {
  -moz-transform: rotate(345deg);
  -ms-transform: rotate(345deg);
  -webkit-transform: rotate(345deg);
  transform: rotate(345deg)
}

.center {
  position: fixed;
  width: calc(90vh * 0.3);
  height: calc(90vh * 0.3);
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: transparent;
  border-radius: calc(90vh * 0.3);
}

.center .image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
}

.circle {
  position: absolute;
  --pos: calc(90vh * 0.12 / 2);
  --height: calc(90vh * 0.12 / 2);
  left: calc(50% - var(--pos));
  top: calc(50% - var(--pos));
  height: calc(90vh * 0.12);
  width: calc(90vh * 0.12);
  border-radius: 50%;
  z-index: 100;
  cursor: pointer;
}

.circle-one {
  transform: rotate(255deg) translateX(calc(90vh * 0.7 / 2));
}

.circle-one .image {
  transform: rotate(-255deg);
}

.circle-one .text {
  --pos: calc(90vh * 0.12);
  transform: /*rotate(-255deg)*/ translateX(calc(var(--pos) + 20px)) translateY(0);
}


.circle-three {
  transform: rotate(315deg) translateX(calc(90vh * 0.7 / 2));
}

.circle-three .image {
  transform: rotate(-315deg);
}

.circle-three .text {
  --pos: calc(90vh * 0.12);
  transform: /*rotate(-315deg)*/ translateX(calc(var(--pos) + 20px)) translateY(0) rotate(-315deg);
  transform: translate(-0%, -0%) rotate(-315deg);
}

.circle .image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: blue;
}

.circle .text {
  background-color: transparent;
  color: #333;
  border: solid 1px #333;
  width: auto;
  padding: 10px;
  display: block;
  z-index: 100;
  font-size: 12px;
  position: absolute;
  left: 0px;
  top: 20px;
  width: 200px;
}

.circle img {
  width: calc(100% + 34px);
  height: calc(100% + 34px);
  margin-left: -17px;
  margin-top: -17px;
}

<div id="content">
  <div class="outer_face">
    <div class="marker marker-one"></div>
    <div class="marker marker-three"></div>
    <div class="circle circle-one">
      <div class="image"></div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</div>
    </div>
    <div class="circle circle-three">
      <div class="image"></div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
    </div>
  </div>

  <div class="center">
    <div class="image"></div>
  </div>
</div>