Why does each word in a child element (class .second) get wrapped onto a new line when using absolute positioning? Is there a way to keep the parent element (class .first) as a round shape, while also ensuring the child element is centered below it 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>