Qualtrics (HTML/CSS/Java): How to create a circle with a line in the middle, text above and below the line

Question

Little experience with creating shapes/these languages.

I creating a survey on Qualtrics and need to put text into circles.

1. One circle is simple enough, and I found previous discussions to help me with it, but for clarity, see the image below.

Right now, I am using this code for the simple circle, will change it to match the second circle.

.circle
    {
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#000
    }

<div class="circle">Text</div>

2. The second circle needs a line in the middle, to divide to text inputs, one above the line, a different one below the line.

Simple Circle

Circle with two text inputs

Answer 1

I used linear-gradient for the "background" (the middle line) and flex for text positioning

.circle
    {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 200px;
    height: 200px;
    border-radius: 250px;
    font-size: 30px;
    color: black;
    text-align: center;
    background: #000;
    border: solid black 1px;
    background: linear-gradient(to top, white 49%, black 50%, white 50%),
      linear-gradient(to bottom, white, black 60%, white 50%);
}

<div class="circle">
  <div>Text</div>
  <div>Text</div>

</div>

as imperyum mentioned, you can achieve the line with before/after pseudo elements

 .circle
    {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    width:200px;
    height:200px;
    border-radius:50%;
    font-size:30px;
    color:black;
    text-align:center;
    background:#000;
    border:solid black 1px;
    background: white
}

.circle:after {
  content:"";
  width:100%;
  background-color:black;
 height:1px;
  position:absolute;
  top:50%;
}

<div class="circle">
  <div>Text</div>
  <div>Text</div>

</div>