Radio Button Position CSS

Question

I'm trying to style this radio buttons for gender choice as shown in the image below:

.radio {
  margin: 0.1rem;
  margin-left: 2.5rem;
  margin-top:
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio input[type="radio"]+.radio-label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  position: relative;
  /* position */
  top: -3.4em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

.radio input[type="radio"]:focus+.radio-label:before {
  outline: none;
  border-color: #3197EE;
}

.radio input[type="radio"]:disabled+.radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}

.radio input[type="radio"]+.radio-label:empty:before {
  margin-right: 0;
}

<div class="form-group">
  <p>Sex <span>*</span></p>
  <span class="icon-case"><i class="fas fa-venus-mars"></i></span>
  <input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
  <div class="validation"></div>
  <div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Male</label>
  </div>

  <div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label for="radio-2" class="radio-label">Female</label>
  </div>
</div>

I want the Male and Female label to be in the right position, which is beside the respective buttons, however adding an ID to the label tag wouldn't allow me to do so.

EDIT

Answer 1

Tried a bit of swap. I got till this:

.radio {
  margin: 0.1rem;
  margin-left: 2.5rem;
  margin-top:
}

.radio input[type="radio"] {
  position: relative;
  opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  position: relative;
  /* position */
  margin-right: 1em;
  margin-top: -2px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}
.radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<div class="form-group">
  <p class="d-inline-block align-top">Sex <span>*</span></p>
  <span class="icon-case"><i class="fas fa-venus-mars"></i></span>
  <div class="d-inline-block">
    <div class="radio">
      <input id="radio-1" name="radio" type="radio" checked />
      <label for="radio-1" class="radio-label">Male</label>
    </div>
    <div class="radio">
      <input id="radio-2" name="radio" type="radio" />
      <label for="radio-2" class="radio-label">Female</label>
    </div>
  </div>
  <div class="validation"></div>
  <input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
</div>

Preview

Changes

A bit of change in CSS: