Element with same height and width in px renders as non-square - html

Question

I'm trying to implement a simple three vertical dot menu, and I'm encountering some rather strange behavior. Even though they all have a determined height and width, the three dots render as non-square, seemingly depending on the grandparent container's dimensions. I've tried using px, rem, em, and percentages to size them, but the issue persists.
I've also tried laying the dots out by setting the parent element's width and height explicitly and making it flexbox, as well as removing all the padding and margin both on the parent and dots, but nothing seems to alleviate the issue. The code looks like this:
.grandparent {
display: flex;
width: 100%;
margin-bottom: 10px;
align-items: center;
}
.item1 {
height: 50px;
width: 50px;
margin-left: 15px;
height: 50px;
width: 50px;
position: relative;
}
.item1 img {
border-radius: 50%;
height: 50px;
}
.item2 {
flex: 1 1;
}
.title {
text-align: left;
margin: 0 0 5px 13px;
font-size: 20px;
font-weight: 400;
}
.subtitle {
text-align: left;
margin-left: 13px;
margin-top: -9px;
font-size: 13px;
color: #808080;
}
.parent {
margin-right: 11px;
padding: 5px 8px;
cursor: pointer;
}
.dot {
width: 6px;
height: 6px;
margin-bottom: 4px;
border-radius: 50%;
background-color: #808080;
}
.no-appearance {
appearance: none;
border: 0;
background: none;
}
<div class="grandparent" style="width: 375px; height: 50px">
<div class="item1"><img src="https://picsum.photos/50/50" /></div>
<div class="item2">
<div class="title">Example text</div>
<div class="subtitle">Example text</div>
</div>
<button class="parent no-appearance">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</button>
</div>
Edit: I added some more code to the snippet to try to reproduce the issue, but unfortunately it does not seem to be reproducible even though it is consistently reproducible in my development environment.
Here's an example of how this renders in Chrome 88.0 when the grandparent is 410x50:
... and here's what it looks like when the grandparent is 375 x 50:
Any idea what might be at play here?

Answer 1

What about html-entitie ⋮?
https://www.w3schools.com/charsets/ref_html_entities_v.asp
.target {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.target::after {
position: absolute;
right: 0;
top: 0;
font-size: 2em;
color: #808080;
content: '\0022EE';
}
.target:hover::after{
cursor: pointer;
}
<div class="target"></div>