Css Circle and text inline - css

Question

Hello i need to have a css circle and on right a text, inline.
I use this code
<div class="circlearancione">Disponibile</div>
.circlearancione{
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
But using this my text not have any space between circle and text. I try to use margin and padding but nothing change.
Also try to use
<div class="circlearancione"></div><p>Disponibile</p>
.circlearancione, p { display: inline; }
But with this not display the circle.
What's wrong?
Thanks

Answer 1

You can use :before pseudo-element for circle and Flexbox for vertical alignment.
.circlearancione {
display: flex;
align-items: center;
}
div:before {
content: '';
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
<div class="circlearancione">Disponibile</div>
You can also put your text in span and add it some margin-left.
.circlearancione {
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
line-height: 25px;
}
span {
margin-left: 30px;
}
<div class="circlearancione"><span>Disponibile</span></div>

Answer 2

You could use simple flex to achieve it. It promotes fluid, responsive, scalable and readable structure.
HTML
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile1</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile2</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile3</p>
</div>
CSS
.container {
display: flex;
align-items: center;
justify-content: center;
}
p { margin:0; }
.container {
display: flex;
align-items: center;
justify-content: center;
}
.circlearancione{
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
p { margin:0; }
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile1</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile2</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile3</p>
</div>

Answer 3

I can imagine something like this if you would like to avoid using flex.
.circlearancione {
display: inline-block;
vertical-align: middle;
margin: 0 5px 0 0;
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
<div id="container">
<p>
<span class="circlearancione"></span>Disponibile
</p>
</div>

Answer 4

My suggestion would be to place a span within your div that will act like the circle
<div class="circlearancione"><span></span> Disponibile</div>
Here is a fiddle: https://jsfiddle.net/v5LLp7uf/