Why does absolute positioning wrap each word on a new line? And how to fix it?

Question

Why is every word in a child element (class .second) with absolute positioning wrapped on a new line? How can I make the parent element (class .first) stay the same shape (round), but at the same time, the child element is lower and centered relative to the parent and has an infinite width?

.first {
  top: 12px;
  left: 100px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  margin: 2px;
  background-color: blue;
  color: blue;
}

.second {
  position: absolute;
  width: auto;
  left: 50%;
  transform: translate(-50%);
}

<div class="first">
  <div class="second">test test test</div>
</div>

Answer 1

use white-space: nowrap;

.first {
  top: 12px;
  left: 100px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  margin: 2px;
  background-color: blue;
  color: blue;
}

.second {
  position: absolute;
  width: auto;
  left: 50%;
  transform: translate(-50%);
  white-space: nowrap;
}

<div class="first">
  <div class="second">test test test</div>
</div>