Center each label around a switch that has two or more lines

Question

I am working with a switch, and because the actual label is wide, I want to break each labeled part. The issue is that I cannot find a way to break it such that it aligns with the switch widget.

I have tried to make a new line with both <br> and <br/>. I have also tried to put the text in <p> ... </p> but it did not work either. The code I used is the following:

<div class="switch">
  <label>
    Off <br/> 0
    <input type="checkbox">
    <span class="lever"></span>
    On <br/> 1
  </label>
</div>

I want to obtain something like in the right green box rather than the one in the red box, see the picture below:

In other words, each label should be centered around the switch.

The code and the result can also be seen on codepen.

Answer 1

HTML

<div class="switch">
    <label>
      <div class="nhannt210695">
             Off <br/> 0
              <input type="checkbox">
              <span class="lever"></span>
              On <br/> 1
      </div>
    </label>
  </div>

CSS

.nhannt210695 {
  display: flex;
  justify-content: center;
  align-items: center;
}

jQuery

$(document).ready(function() {
  $("input").change(function() {
    if($(this).is(":checked")) {
      console.log("Is checked");
    }
    else {
      console.log("Is Not checked");
    }
  })
});