Custom checkbox stretches vertically when text wraps

I have a styled checkbox that is the child of a container along with some text. The reason the checkbox and text are children of a parent is so that they can sit next to each other and be centered vertically on the UI. This has worked fine for me; however, I've noticed that the checkbox starts to change from a perfect circle into more of an oval as text starts to wrap into multiple lines (on mobile the text is two lines long and on desktop it is only one line). How could I fix this so that the checkbox does not stretch as the text wraps into multiple lines? Below is my html and styling, thank you.

.opt-in {
  display: flex;
  align-items: center;
  color: #f4a11e;
}

input[type='checkbox'] {
  position: relative;
  margin: 17px 15px 0 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid #f4a11e;
  outline: none;
  border-radius: 50%;
  transition: 0.5s;
}

input[type='checkbox']:before {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  width: 4px;
  height: 10px;
  opacity: 0;
  border-right: 1px solid #f4a11e;
  border-bottom: 1px solid #f4a11e;
  transform: translate(-50%, -50%) rotateZ(40deg);
  transition: 0.2s;
}

input:checked[type='checkbox']:before {
  opacity: 1;
}

<div class="opt-in">
  <input type="checkbox" v-model="optIn" id="checkbox" />
  <label for="checkbox">Opt-in to receive the latest cloud insights and industry deep dives.</label>
</div>