How do I make this checkbox be before my h3 element?

I have this HTML and CSS markup:

body {
  background-color: #f5f5f5;
}

._contain_items {
  display: block;
  width: 1000px;
  height: fit-content;
  border: 1px solid rgba(0, 0, 0, .12);
  background-color: #ffffff;
}

._inline_task {
  display: flex;
  flex-direction: row;
}

._when {
  margin-top: 0% !important;
  margin-left: auto;
  margin-bottom: 0% !important;
  align-self: flex-end;
}

._lightweighted {
  margin-top: 0% !important;
  font-size: 16px;
  font-weight: 500;
  color: #7f8ca1;
}

._title_task {
  margin-top: 0% !important;
  margin-bottom: 0% !important;
}

.checkbox-container {
  width: 50px;
  height: 28px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  position: relative;
}

.checkbox-container label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: relative;
  top: 0;
  width: 28px;
}

.checkbox-container label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: relative;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.checkbox-container input[type="checkbox"] {
  visibility: hidden;
}

.checkbox-container input[type="checkbox"]:checked+label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.checkbox-container input[type="checkbox"]:checked+label:after {
  opacity: 1;
}

<div class="_contain_items">
  <h3> Employee Tasks </h3>
  <hr style="border: none;height: 1px;background-color: #333;">

  <div class="_inline_task">

    <div class="checkbox-container">
      <input type="checkbox" id="checkbox" />
      <label for="checkbox"></label>
    </div>

    <h3 class="_title_task"> Title of the task </h3>
    <h3 class="_when"> Tomorrow </h3>

  </div>

  <p class="_lightweighted"> Housekeeping </p>

</div>

</body>

The problem that I'm facing is at the checkbox. I want to make a circle checkbox with this ✔️ sign. When position is absolute it works as intended but it is not before h3(Title of the task). When I change position at relative the circle appears at the right place but the sign its not there. How do I make it appear before the h3?