My attempt at creating a custom toggle button using an HTML input checkbox and custom CSS has resulted in a misalignment between the text and the toggle button itself. Despite my efforts to adjust margins, padding, and heights, I have been unable to resolve this issue.
Here is the HTML code and corresponding CSS that I am working with ->
<h5 style="display:inline" class="switch">Company</h5>
<label class="switch">
<input type="checkbox" id="company-survey-checker">
<span class="slider round"></span>
</label>
<h5 style="display:inline">Survey</h5>
The CSS being used for styling is as follows ->
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Additional CSS code goes here */
</style>
Ideally, the text and toggle buttons should be aligned on the same line, but I am struggling to achieve this. Any assistance or advice would be greatly appreciated.