I am in the process of creating a side menu with filters, and I need to design a row that includes an input checkbox along with some accompanying text. However, I am facing an issue where the checkbox does not center properly within the flex container when the text is too long. I have attempted to use
align-items: baseline
but it has not resolved the problem.
Current:
https://i.stack.imgur.com/AmPxD.png
Expected:
https://i.stack.imgur.com/WC2eN.png
<div class="container" style="width:100px; height: 40px;">
<div class="little-container mt-3">
<div class="d-flex flex-row align-items-baseline">
<input type="checkbox" />
<span class="font-weight-bold flex-grow-1">Just a really big text Just a really big text Just a really big text Just a really big text</span>
</div>
</div>
</div>
You can also view my fiddle using Bootstrap 4 here
Thank you.