Circular HTML shape - only DIV works, but I want it inline

Question

I want a matte circular shape with a thin border around it, like this:

.circle {
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.1em;
}

.ci {
  margin: 0.2em;
  height: 1.1em;
  width: 1.1em;
  background-color: black;
  border-radius: 50%;
}

Bang:
<div class="circle">
  <div class="ci"></div>
</div> More

but it needs to be inline, i.e. no line break after 'Bang:' and no line break before 'More'. If I exchange the divs for spans or say display: inline for the divs, the shape is gone.

https://www.w3schools.com/code/tryit.asp?filename=GK4AJ5M28W16

Answer 1

You can simply use flexbox positioning like this:

.circle {
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.1em;
}

.ci {
  margin: 0.2em;
  height: 1.1em;
  width: 1.1em;
  background-color: black;
  border-radius: 50%;
}

section {
display:flex;align-items:center;
}

section * {
margin:0 10px;
}

<section class="flex">
<span>Bang:</span>
<div class="circle"><div class="ci"></div></div>
<span>Bang:</span>
</section>

Answer 2

You can use display: inline-block; for the shape, border-radius etc. to work, and add vertical-align: middle; for an appropriate alignment:

.circle {
  display: inline-block;
  vertical-align: middle;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.1em;
}

.ci {
  margin: 0.2em;
  height: 1.1em;
  width: 1.1em;
  background-color: black;
  border-radius: 50%;
}

Bang:
<div class="circle">
  <div class="ci"></div>
</div> More