How to Prevent long text label wrapping under the checkbox/radio button?
You can use flexbox to achieve this.
.wrap {
width: 220px;
}
.indi-wrap {
padding-bottom: 10px;
display: flex;
align-items: flex-start;
}
.indi-wrap input { flex: 1; }
.indi-wrap label { flex: 7; }
.control-label {
display: inline;
font-weight: 300;
}
button.btn-link {
background: 0;
border: 0;
padding: 0;
margin: 0;
}
<div class="wrap">
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
<button type="button" class="btn btn-link">only</button>
</div>
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Xonsectetur adipiscing.</label>
<button type="button" class="btn btn-link">only</button>
</div>
<div class="indi-wrap">
<input type="checkbox" />
<label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
<button type="button" class="btn btn-link">only</button>
</div>
</div>