How do I create this in html and CSS

Issue

It works well in Android but in desktop the hr tag will go out of circle and goes to top of circle

#circle {
  border        : 5px solid red;
  width         : 40%;
  box-shadow    : 0 0 20px red, inset 0 0 20px red;
  aspect-ratio  : 1/1;
  border-radius : 50%;
  text-align    : center;
  font-size     : large;
  }
#circle > div {
  font-size   : 24px; 
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  }
#circle > hr {
  background  : red; 
  border      : 2px solid red; 
  box-shadow  : 0 0 20px red, inset 0 0 20px red;
  }
#circle > span {
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  }

<div class="circle" id="circle">
  <br>
  <div id="result1" ></div>
  <hr>
  <span id="result2"></span>
</div>

Solution

Remove the <br> and the <hr> tags. You might need to modify the stylesheet too. Try the solution below:

#circle {
  border        : 5px solid red;
  width         : 40%;
  box-shadow    : 0 0 20px red, inset 0 0 20px red;
  aspect-ratio  : 1/1;
  border-radius : 50%;
  text-align    : center;
  font-size     : large;
  }
#circle > div {
  font-size   : 24px; 
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  height: 50%;
  position: relative;
  }
#circle > div#result1 {
  border-bottom: 5px solid red;
  }
#circle > hr {
  background  : red; 
  border      : 2px solid red; 
  box-shadow  : 0 0 20px red, inset 0 0 20px red;
  }
#circle > span {
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  }

<div class="circle" id="circle">
  <div id="result1" ></div>
  <span id="result2"></span>
</div>

Answered By - ProblemChild