Element behaving like block despite being inline-block - html

Question

I want my priority-menu (the one with 2 dots) to have the 3 dots displayed horizontally. Since each individual dot is inline-block I don't understand why they are stacked on top of one another. The menu is rendered by clicking on the blue circle on the right of the "save task" button, which changes its display to inline instead of none. I tried changing that to inline-block and nothing seems to have changed.
/* The popup menu - hidden by default */
#priority-menu {
display: none;
position: absolute;
top: 150%;
border: 3px solid #f1f1f1;
z-index: 9;
max-width: 300px;
padding: 10px;
background-color: white;
}
#priority-dot-open-menu {
position: relative;
height: 25px;
width: 25px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
cursor: pointer;
}
#priority-dot-open-menu:hover {
opacity: 1;
}
#priority-dot-blue {
height: 25px;
width: 25px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
}
#priority-dot-yellow {
height: 25px;
width: 25px;
background-color: yellow;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
}
#priority-dot-red {
height: 25px;
width: 25px;
background-color: red;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
}
.modal-footer {
padding: 0;
}
#priority-menu::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
<div class="modal-footer d-flex flex-row justify-content-start pl-0 mt-4 border-0">
<button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save task</button>
<span id="priority-dot-open-menu">
<span id="priority-menu">
<span class="tooltip-top"></span>
<span id="priority-dot-blue"></span>
<span id="priority-dot-yellow"></span>
<span id="priority-dot-red"></span>
</span>
</span>
</div>

Answer 1

Your priority-menu is contained within an element which you’ve set to 25px width. Try removing this and changing to 300px, like your priority-menu.
#priority-dot-open-menu {
position: relative;
height: 25px
width: 300px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
cursor: pointer;
}
You can also try adding a declared width to your menu instead of just a max-width.
#priority-menu {
width:300px;
}