I am trying to align a long label with an input element. I have used form-inline which is working with short label but moving to next line with a long label text.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="form-inline">
<input type="checkbox" class="" name="" />
<label>The patient continues to demonstrate progress towards meeting the current set of treatment goals. As a result, the current treatment plan has been extended for another </label>
<input type="number" class="" name="" />
<label>visits</label>
</div>CodePudding user response：
Set display: inline for the label, so that it will fit your content.
.form-inline label {
display: inline;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="form-inline">
<input type="checkbox" class="" name="" />
<label>The patient continues to demonstrate progress towards meeting the current set of treatment goals. As a result, the current treatment plan has been extended for another </label>
<input type="number" class="" name="" />
<label>visits</label>
</div>For some reasons this snippet is not working in here. See here